@font-face {
  font-family: "Inter";
  src: url("/assets/inter-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-variable-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #101013;
  --ink-soft: #17171c;
  --ink-elevated: #202025;
  --line-dark: rgba(255, 255, 255, .11);
  --text: #f2f2f5;
  --muted: #9a9aa4;
  --paper: #f4f4f6;
  --paper-2: #ececf1;
  --paper-card: #fff;
  --paper-line: #dedee4;
  --paper-text: #18181b;
  --paper-muted: #71717a;
  --primary: #2742f5;
  --primary-light: #5269ff;
  --live: #3ddc84;
  --danger: #e83e2f;
  --cyan: #0891b2;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --grain-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  --radius: 10px;
  --container: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { color: inherit; }
[hidden] { display: none !important; }

.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 10px 14px; color: #fff; background: var(--primary); transform: translateY(-140%); }
.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid transparent;
  transition: background .2s, border-color .2s;
}

.site-header.is-scrolled { border-color: var(--line-dark); background: rgba(16, 16, 19, .88); backdrop-filter: blur(18px); }
.nav-shell { width: min(calc(100% - 48px), var(--container)); height: 78px; margin-inline: auto; display: grid; grid-template-columns: 180px 1fr 250px; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 7px; width: max-content; }
.brand img { width: 104px; height: auto; }
.brand > span { padding: 2px 6px; border: 1px solid rgba(255,255,255,.23); border-radius: 4px; color: #c7ccdc; font: 600 10px/1.5 var(--mono); letter-spacing: .12em; }
.site-nav { display: flex; justify-content: center; gap: 34px; color: #b6b6bf; font-size: 13px; font-weight: 520; }
.site-nav a, .nav-login { transition: color .18s; }
.site-nav a:hover, .nav-login:hover { color: #fff; }
.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.nav-login { color: #b6b6bf; font-size: 13px; }
.nav-toggle { display: none; border: 0; background: none; }

.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border: 1px solid transparent; border-radius: 7px; font-size: 14px; font-weight: 650; transition: transform .18s, color .18s, background .18s, border-color .18s; }
.button:hover { transform: translateY(-2px); }
.button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.button-nav { min-height: 38px; padding-inline: 16px; color: #fff; background: var(--primary); font-size: 12px; }
.button-primary { color: #fff; background: var(--primary); box-shadow: 0 12px 38px rgba(39,66,245,.28); }
.button-primary:hover { background: #3852ff; }
.button-secondary { color: #e7e7eb; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
.button-secondary:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); }

.hero { position: relative; overflow: hidden; padding: 162px 0 0; background: radial-gradient(circle at 50% 28%, #1b1c27 0, #111115 42%, #0d0d10 76%); }
.hero-noise, .cta-noise { position: absolute; inset: 0; opacity: .18; pointer-events: none; background-image: var(--grain-texture); animation: grain-drift 1.3s steps(6) infinite; }
.hero-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 65%); }
.hero-glow { position: absolute; top: 40px; left: 50%; width: 860px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(39,66,245,.21), transparent 68%); filter: blur(30px); transform: translateX(-50%); }
.hero-copy { position: relative; z-index: 2; text-align: center; }
.eyebrow, .section-kicker { margin: 0; color: #9797a2; font: 600 11px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(61,220,132,.09); }
.hero h1 { max-width: 1040px; margin: 22px auto 0; color: #fff; font-size: clamp(58px, 8vw, 106px); font-weight: 620; line-height: .94; letter-spacing: -.07em; }
.hero-lede { max-width: 660px; margin: 31px auto 0; color: #b8b8c1; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; letter-spacing: -.02em; }
.hero-actions { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.hero-note { margin: 14px 0 0; color: #71717a; font: 500 11px/1.4 var(--mono); }

.dashboard-stage { position: relative; z-index: 3; margin-top: 78px; padding-bottom: 8px; }
.dashboard-stage::before { position: absolute; z-index: -1; right: 7%; bottom: 2%; left: 7%; height: 50%; content: ""; background: rgba(39,66,245,.24); filter: blur(80px); }
.product-window { min-height: 650px; overflow: hidden; color: var(--paper-text); border: 1px solid rgba(255,255,255,.25); border-radius: 12px 12px 0 0; background: #f2f2f5; box-shadow: 0 44px 90px rgba(0,0,0,.48), 0 0 0 8px rgba(255,255,255,.025); }
.product-sidebar { display: flex; flex-direction: column; gap: 9px; padding: 16px 11px; border-right: 1px solid #dfdfe4; background: #fff; color: #606067; font-size: 12px; }
.workspace-mark { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; margin: -2px 7px 10px; color: #1d1d21; }
.workspace-mark b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 6px; color: #fff; background: #24242b; font-size: 12px; }
.workspace-mark strong { font-size: 12px; }
.workspace-mark span { color: #999; }
.product-sidebar > span, .side-active { padding: 5px 10px; }
.product-sidebar small { margin: 9px 10px 0; color: #a1a1a8; font: 600 8px/1 var(--mono); letter-spacing: .15em; }
.side-active { border-radius: 6px; color: #fff; background: #24242b; font-weight: 650; }
.product-main { position: relative; min-width: 0; padding-bottom: 48px; }
.product-topbar { height: 58px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfdfe4; background: rgba(255,255,255,.94); }
.product-identity { display: flex; align-items: center; gap: 9px; }.product-identity > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 6px; color: #fff; background: #24242b; font-size: 11px; }.product-identity > strong { font-size: 13px; }.product-identity > span { padding-left: 9px; color: #aaaab0; border-left: 1px solid #dddde2; font-size: 10px; }
.product-live { display: flex; align-items: center; gap: 7px; color: #66666d; font: 600 9px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.product-live i { width: 6px; height: 6px; border-radius: 50%; background: #12a25d; box-shadow: 0 0 0 4px rgba(18,162,93,.1); animation: live-pulse 1.8s ease-in-out infinite; }
.command-search { width: 150px; display: flex; justify-content: space-between; padding: 7px 9px; color: #77777e; border: 1px solid #dedee2; border-radius: 6px; font-size: 10px; }
.command-search kbd { padding-inline: 4px; color: #aaaab0; border: 1px solid #dddde2; border-radius: 3px; background: #fafafa; font: 8px var(--mono); }
.dashboard-canvas { position: relative; min-height: 545px; padding: 28px 24px 50px; overflow: hidden; background-color: #eeeef3; background-image: radial-gradient(circle at 85% 96%, rgba(39,66,245,.10), transparent 34%); }
.dashboard-canvas::before { position: absolute; z-index: 0; inset: 0; pointer-events: none; content: ""; opacity: .3; background-image: var(--grain-texture); animation: grain-drift 1.3s steps(6) infinite; }
.dashboard-canvas > * { position: relative; z-index: 1; }
.product-section-label, .analytics-label { display: flex; justify-content: space-between; color: #99999f; font: 600 8px/1.3 var(--mono); letter-spacing: .14em; }
.spotlight-grid { display: grid; grid-template-columns: .92fr 1.5fr .92fr; gap: 13px; margin-top: 12px; }
.spotlight-card { position: relative; min-width: 0; min-height: 330px; padding: 20px; overflow: hidden; border: 1px solid #d9d9df; border-radius: 10px; background: rgba(255,255,255,.91); box-shadow: 0 3px 12px rgba(24,24,29,.04); }
.spotlight-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.spotlight-card-head small { color: #8f8f96; font: 650 8px var(--mono); letter-spacing: .13em; }.spotlight-card-head span { color: #898990; font: 500 8px var(--mono); }.spotlight-card-head span i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--live); }
.spotlight-inbound { color: #fff; border-color: #303242; background: linear-gradient(140deg, #3e4358, #292d40 44%, #14151e); box-shadow: 0 15px 30px rgba(25,27,40,.18); }.spotlight-inbound::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .32; background-image: var(--grain-texture); mix-blend-mode: overlay; }.spotlight-inbound::after { position: absolute; width: 180px; height: 180px; right: -80px; bottom: -100px; content: ""; border-radius: 50%; background: rgba(67,91,255,.34); filter: blur(28px); animation: signal-breathe 4s ease-in-out infinite alternate; }.spotlight-inbound > * { position: relative; z-index: 1; }.spotlight-inbound .spotlight-card-head small, .spotlight-inbound .spotlight-card-head span { color: rgba(255,255,255,.64); }.spotlight-inbound > strong { display: block; margin-top: 30px; font-size: 48px; font-weight: 590; line-height: 1; letter-spacing: -.055em; }.spotlight-inbound > p { margin: 7px 0 0; color: rgba(255,255,255,.63); font-size: 10px; }.message-wave { width: 100%; height: 82px; margin-top: 13px; overflow: visible; fill: none; stroke: #7182ff; stroke-width: 2.2; filter: drop-shadow(0 0 5px rgba(82,105,255,.55)); }.message-wave path { stroke-dasharray: 360; stroke-dashoffset: 360; animation: draw-line 2.6s ease-out forwards, wave-glow 3s ease-in-out 2.6s infinite; }.spotlight-inbound footer { position: absolute; right: 20px; bottom: 17px; left: 20px; display: flex; gap: 6px; }.spotlight-inbound footer span { padding: 4px 6px; color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.13); border-radius: 4px; font: 500 7px var(--mono); }
.spotlight-ai { background: radial-gradient(circle at 50% 45%, rgba(39,66,245,.08), transparent 46%), rgba(255,255,255,.94); }.ai-resolution { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 20px; margin-top: 18px; }.ai-rings { position: relative; width: 144px; height: 144px; display: grid; place-items: center; }.ai-rings > i { position: absolute; inset: 0; border: 1px solid rgba(39,66,245,.18); border-radius: 50%; }.ai-rings > i:nth-child(2) { inset: 14px; border-style: dashed; animation: orbit-spin 12s linear infinite; }.ai-rings > i:nth-child(3) { inset: 29px; border: 7px solid #e8e9ee; border-top-color: var(--primary); border-right-color: var(--primary); transform: rotate(24deg); animation: ring-settle 1.3s cubic-bezier(.2,.8,.2,1) both; }.ai-rings > b { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }.ai-rings strong { font-size: 25px; line-height: 1; letter-spacing: -.05em; }.ai-rings small { margin-top: 4px; color: #77777e; font: 600 7px var(--mono); text-transform: uppercase; letter-spacing: .1em; }.resolution-copy > strong { font-size: 17px; letter-spacing: -.02em; }.resolution-copy > p { max-width: 180px; margin: 6px 0 0; color: #6f6f77; font-size: 10px; line-height: 1.45; }.resolution-copy > span { display: block; margin-top: 13px; color: #07804a; font: 600 8px var(--mono); }.route-visual { display: grid; grid-template-columns: auto 1fr 32px 1fr auto; align-items: center; gap: 8px; margin-top: 13px; padding: 11px 13px; border: 1px solid #e0e0e5; border-radius: 8px; background: rgba(248,248,250,.85); }.route-visual span { color: #73737b; font: 600 8px var(--mono); }.route-visual > b { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: #fff; background: var(--primary); font: 700 9px var(--mono); box-shadow: 0 5px 15px rgba(39,66,245,.25); }.route-visual > i { position: relative; height: 1px; background: #ccd0e6; overflow: hidden; }.route-visual > i::after { position: absolute; top: -2px; left: -5px; width: 5px; height: 5px; content: ""; border-radius: 50%; background: var(--primary); animation: route-travel 2s ease-in-out infinite; }.route-visual > i:nth-of-type(2)::after { animation-delay: 1s; }
.spotlight-team { background: linear-gradient(165deg, rgba(255,255,255,.96), rgba(246,246,249,.9)); }.spotlight-team .spotlight-card-head span { color: #07804a; }.team-queue { display: flex; align-items: baseline; gap: 9px; margin-top: 33px; }.team-queue strong { font-size: 48px; line-height: 1; letter-spacing: -.055em; }.team-queue p { margin: 0; color: #73737b; font-size: 10px; }.agent-stack { display: flex; margin-top: 25px; }.agent-stack i { display: grid; width: 38px; height: 38px; margin-left: -8px; place-items: center; border: 3px solid #f8f8fa; border-radius: 50%; color: #fff; background: #30313b; font: 650 8px var(--mono); animation: agent-float 3.4s ease-in-out infinite; }.agent-stack i:first-child { margin-left: 0; background: #2742f5; }.agent-stack i:nth-child(2) { background: #596072; animation-delay: .35s; }.agent-stack i:nth-child(3) { background: #167b53; animation-delay: .7s; }.agent-stack i:nth-child(4) { color: #5f5f67; background: #e6e6eb; animation-delay: 1.05s; }.spotlight-team dl { margin: 27px 0 0; padding-top: 15px; border-top: 1px solid #e0e0e5; }.spotlight-team dl div { display: flex; justify-content: space-between; margin-top: 8px; color: #6e6e76; font-size: 9px; }.spotlight-team dt, .spotlight-team dd { margin: 0; }.spotlight-team dd { color: #29292f; font: 600 9px var(--mono); }
.signal-strip { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 13px; overflow: hidden; border: 1px solid #d9d9df; border-radius: 8px; background: rgba(255,255,255,.82); }.signal-strip span { min-height: 42px; padding: 0 22px; display: flex; align-items: center; gap: 6px; color: #73737a; border-left: 1px solid #e0e0e5; font: 500 8px var(--mono); }.signal-strip span:first-child { border-left: 0; }.signal-strip i { width: 5px; height: 5px; border-radius: 50%; background: var(--live); animation: live-pulse 1.8s ease-in-out infinite; }.signal-strip b { color: #24242a; }
.funnel-grid { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1.24fr 34px 1fr; align-items: stretch; margin-top: 10px; }
.funnel-card { min-height: 210px; padding: 16px; display: flex; flex-direction: column; border: 1px solid #dcdce2; border-radius: 9px; background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.funnel-card > small { color: #99999f; font: 650 9px/1 var(--mono); letter-spacing: .12em; }
.funnel-card > strong { margin-top: 8px; font-size: 32px; line-height: 1; letter-spacing: -.045em; }
.funnel-card > p { margin: 5px 0 0; color: #74747b; font-size: 10px; }
.funnel-card dl { margin: 15px 0 0; }
.funnel-card dl div { display: flex; justify-content: space-between; margin-top: 5px; color: #65656c; font-size: 10px; }
.funnel-card dt, .funnel-card dd { margin: 0; }
.funnel-card dd { color: #28282e; font-family: var(--mono); }
.funnel-card footer { display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 11px; color: #07723f; border-top: 1px solid #e5e5e8; font-size: 9px; }
.funnel-card footer i { width: 5px; height: 5px; border-radius: 50%; background: #13a45f; }
.funnel-card-ink { color: #fff; border-color: #272938; background: linear-gradient(140deg, #3e4358, #2a2e42 42%, #14151e); box-shadow: 0 12px 28px rgba(27,28,39,.19); }
.funnel-card-ink::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .35; background-image: var(--grain-texture); mix-blend-mode: overlay; }
.funnel-card-ink > * { position: relative; }
.funnel-card-ink > small, .funnel-card-ink > p, .funnel-card-ink dl div { color: rgba(255,255,255,.68); }
.funnel-card-ink dd { color: #fff; }
.funnel-card-ink footer { color: #8ef0b9; border-color: rgba(255,255,255,.15); }
.funnel-arrow { align-self: center; display: flex; align-items: center; flex-direction: column; color: #c2c2c8; font-size: 16px; }
.funnel-arrow small { margin-top: 4px; color: #aaaab0; font: 7px var(--mono); }
.ring-stat { display: flex; align-items: center; gap: 9px; margin-top: 13px; }
.ring-stat b { display: grid; width: 45px; height: 45px; place-items: center; border: 6px solid #ededf0; border-top-color: var(--primary); border-right-color: var(--primary); border-radius: 50%; font-size: 11px; }
.ring-stat span { color: #6d6d73; font-size: 10px; line-height: 1.35; }
.queue-stat { display: flex; align-items: baseline; gap: 6px; margin-top: 9px; }
.queue-stat strong { font-size: 33px; line-height: 1; }
.queue-stat span { color: #6b6b72; font-size: 10px; }
.operation-strip { display: grid; grid-template-columns: 1fr 1fr 1.1fr; margin-top: 16px; border: 1px solid #dcdce2; border-radius: 9px; background: rgba(255,255,255,.88); }
.operation-strip article { min-height: 120px; padding: 15px; }
.operation-strip article + article { border-left: 1px solid #dddde2; }
.operation-strip small, .operation-cards small, .channel-credit-grid small { color: #99999f; font: 650 8px/1 var(--mono); letter-spacing: .13em; }
.operation-strip strong { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; }
.operation-strip strong span { color: #78787e; font-size: 9px; font-weight: 500; }
.operation-strip p { display: flex; justify-content: space-between; margin: 9px 0 0; color: #77777e; font-size: 10px; }
.operation-strip p b { color: #2c2c31; font-family: var(--mono); }.operation-strip p .good { color: #078044; }
.all-clear { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 12px 15px; border: 1px solid #dcdce2; border-radius: 8px; background: rgba(255,255,255,.9); font-size: 10px; }
.all-clear i { color: #07924b; font-style: normal; }.all-clear span { color: #74747b; }
.operation-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.operation-cards article { min-height: 210px; padding: 18px; border: 1px solid #dcdce2; border-radius: 9px; background: rgba(255,255,255,.92); }
.operation-cards article > strong { display: block; margin-top: 13px; font-size: 30px; line-height: 1; }.operation-cards article > p { margin: 6px 0; color: #77777e; font-size: 10px; }
.operation-cards hr { margin: 20px 0 12px; border: 0; border-top: 1px solid #e3e3e7; }.operation-cards article > span { display: flex; justify-content: space-between; margin-top: 9px; color: #65656c; font-size: 10px; }.operation-cards b { font-family: var(--mono); }
.agent-workbench { height: 428px; margin-top: 11px; display: grid; grid-template-columns: 232px minmax(0, 1fr); overflow: hidden; border: 1px solid #d7d7dd; border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: 0 9px 30px rgba(24,24,29,.07); }
.conversation-list { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid #dedee3; background: #f7f7f9; }.conversation-list > header { min-height: 53px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e2e6; }.conversation-list > header strong { font-size: 11px; }.conversation-list > header span { color: #8b8b92; font: 600 7px var(--mono); }
.conversation-item { position: relative; min-height: 76px; padding: 12px 11px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #e5e5e8; background: transparent; }.conversation-item.is-active { background: #fff; box-shadow: inset 3px 0 var(--primary); }.conversation-item > i, .conversation-head i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: #3f4351; font: 650 7px var(--mono); font-style: normal; }.conversation-item.is-active > i { background: var(--primary); }.conversation-item div { min-width: 0; }.conversation-item strong { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.conversation-item p { margin: 4px 0 0; overflow: hidden; color: #86868e; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.conversation-item time { align-self: start; margin-top: 3px; color: #a0a0a7; font: 500 6px var(--mono); }.conversation-item > b { position: absolute; right: 10px; bottom: 12px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font: 650 6px var(--mono); }.conversation-list > footer { margin-top: auto; min-height: 43px; padding: 0 14px; display: flex; align-items: center; gap: 7px; color: #6f7077; border-top: 1px solid #e2e2e6; font: 600 7px var(--mono); }.conversation-list > footer i { width: 5px; height: 5px; border-radius: 50%; background: #16a364; box-shadow: 0 0 0 3px rgba(22,163,100,.1); }
.agent-conversation { min-width: 0; display: grid; grid-template-rows: 53px minmax(0,1fr) 52px; background: #fff; }.conversation-head { padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e2e6; }.conversation-head > div { display: flex; align-items: center; gap: 9px; }.conversation-head i { width: 31px; height: 31px; background: var(--primary); }.conversation-head span { display: flex; flex-direction: column; }.conversation-head span strong { font-size: 10px; }.conversation-head span small { margin-top: 2px; color: #8a8a92; font: 500 6px var(--mono); }.conversation-head > div:last-child > span { color: #96969e; font: 500 6px var(--mono); }.conversation-head > div:last-child > b { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: #30313b; font: 650 7px var(--mono); }
.conversation-body { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 225px; }.message-stream { min-width: 0; padding: 12px 16px; overflow: hidden; background-color: #f8f8fa; background-image: radial-gradient(circle at 10% 100%, rgba(34,85,255,.07), transparent 36%); }.chat-time { margin: 0 0 8px; color: #a0a0a7; font: 600 6px var(--mono); text-align: center; letter-spacing: .1em; }.chat-bubble { position: relative; width: max-content; max-width: 76%; margin-top: 8px; padding: 9px 10px 16px; border: 1px solid #dedee3; border-radius: 7px 7px 7px 2px; background: #fff; box-shadow: 0 2px 6px rgba(24,24,29,.03); font-size: 8px; line-height: 1.4; }.chat-bubble.is-agent { margin-left: auto; color: #fff; border-color: #304edb; border-radius: 7px 7px 2px 7px; background: linear-gradient(145deg, #315cf9, #2444ce); }.chat-bubble time { position: absolute; right: 8px; bottom: 5px; color: #aaaab1; font: 500 5px var(--mono); }.chat-bubble.is-agent time { color: rgba(255,255,255,.62); }.chat-event { width: 82%; margin: 9px auto; padding: 6px 8px; display: flex; align-items: center; gap: 7px; border: 1px solid #dfe2f0; border-radius: 5px; background: #f1f3ff; color: #667; font-size: 6px; }.chat-event i { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; border-radius: 5px; color: #fff; background: var(--primary); font: 700 6px var(--mono); font-style: normal; }
.agent-context { min-width: 0; padding: 15px; border-left: 1px solid #e1e1e6; background: #fafafd; }.context-title { display: flex; align-items: center; gap: 8px; }.context-title > i { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 6px; color: #fff; background: var(--primary); box-shadow: 0 5px 15px rgba(34,85,255,.22); font: 700 7px var(--mono); font-style: normal; }.context-title span { display: flex; flex-direction: column; }.context-title small { color: #7d88ba; font: 650 6px var(--mono); letter-spacing: .08em; }.context-title strong { margin-top: 2px; font-size: 9px; }.agent-context > p { margin: 13px 0 0; color: #686871; font-size: 7px; line-height: 1.55; }.agent-context dl { margin: 13px 0 0; padding-top: 8px; border-top: 1px solid #e4e4e8; }.agent-context dl div { margin-top: 7px; display: flex; justify-content: space-between; color: #8a8a91; font-size: 6px; }.agent-context dt, .agent-context dd { margin: 0; }.agent-context dd { color: #33333a; font: 600 6px var(--mono); }.agent-context > button { width: 100%; margin-top: 13px; padding: 8px; color: #3753d1; border: 1px solid #cfd6fb; border-radius: 5px; background: #f0f3ff; font-size: 6px; font-weight: 650; }
.conversation-composer { padding: 8px 10px 8px 14px; display: flex; align-items: center; justify-content: space-between; color: #9b9ba2; border-top: 1px solid #e2e2e6; font-size: 8px; }.conversation-composer div { display: flex; gap: 6px; }.conversation-composer button { height: 30px; padding: 0 11px; border: 1px solid #dddde2; border-radius: 5px; background: #fff; font-size: 7px; }.conversation-composer button:last-child { color: #fff; border-color: var(--primary); background: var(--primary); font-weight: 650; }
.dashboard-view.is-active .conversation-item { animation: chat-list-in .46s cubic-bezier(.2,.8,.2,1) both; }.dashboard-view.is-active .conversation-item:nth-child(3) { animation-delay: .06s; }.dashboard-view.is-active .conversation-item:nth-child(4) { animation-delay: .12s; }.dashboard-view.is-active .chat-bubble, .dashboard-view.is-active .chat-event { animation: chat-message-in .48s cubic-bezier(.2,.8,.2,1) both; }.dashboard-view.is-active .chat-event { animation-delay: .12s; }.dashboard-view.is-active .chat-bubble:nth-of-type(3) { animation-delay: .2s; }.dashboard-view.is-active .chat-bubble:nth-of-type(4) { animation-delay: .28s; }.dashboard-view.is-active .agent-context { animation: context-slide-in .55s cubic-bezier(.2,.8,.2,1) .15s both; }
.channel-credit-grid { display: grid; grid-template-columns: 1.5fr 1fr; margin-top: 12px; border: 1px solid #dcdce2; border-radius: 9px; background: rgba(255,255,255,.92); }
.channel-credit-grid article { padding: 16px; }.channel-credit-grid article + article { border-left: 1px solid #dddde2; }
.channel-credit-grid p { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 10px; }.channel-credit-grid p b { margin-left: auto; color: #07924b; font-size: 9px; }
.channel-credit-grid p i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 4px; color: #fff; font: 700 8px var(--mono); }.channel-credit-grid .wa { background: #14864b; }.channel-credit-grid .tg { background: #1f61e9; }.channel-credit-grid .ig { background: #e14c86; }
.channel-credit-grid article > strong { display: block; margin-top: 13px; font-size: 34px; line-height: 1; }.channel-credit-grid article > span { color: #7b7b82; font-size: 9px; }
.pulse-bar { position: absolute; z-index: 5; right: 8%; bottom: 45px; left: 8%; height: 48px; display: flex; align-items: stretch; color: #eeeef1; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: #222228; box-shadow: 0 12px 30px rgba(0,0,0,.22); font-size: 10px; }
.pulse-bar > p { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0 16px; border-left: 1px solid rgba(255,255,255,.09); white-space: nowrap; }.pulse-bar > p i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }.pulse-bar p b { color: #fff; font-family: var(--mono); }
.view-tabs { display: flex; gap: 3px; padding: 4px; }
.view-tabs button { padding: 0 12px; border: 0; border-radius: 6px; color: #b9b9c1; background: transparent; font-size: 10px; cursor: pointer; }.view-tabs button.is-active { color: #fff; background: #494950; }.view-tabs span { margin-left: 4px; font-weight: 600; }
.status-line { position: absolute; right: 18px; bottom: 16px; left: 18px; display: flex; gap: 20px; color: #66666d; font: 8px/1 var(--mono); }.status-line span:last-child { margin-left: auto; }.status-line span { display: flex; align-items: center; gap: 6px; }.status-line i { width: 5px; height: 5px; border-radius: 50%; background: #11975a; }
.hero-statement { position: relative; padding: 84px 0 105px; text-align: center; }
.hero-statement p { max-width: 900px; margin: 0 auto; color: #f4f4f6; font-size: clamp(34px, 5vw, 64px); font-weight: 540; line-height: 1.08; letter-spacing: -.05em; }

.section { padding: 126px 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: end; gap: 70px; }
.section-head h2 { max-width: 760px; margin: 16px 0 0; font-size: clamp(44px, 5.4vw, 72px); font-weight: 560; line-height: 1.02; letter-spacing: -.055em; }
.section-head > p { margin: 0 0 5px; color: #a5a5ae; font-size: 17px; line-height: 1.7; }
.section-kicker { color: #777782; }

.metrics-section { color: var(--text); background: #15151a; border-top: 1px solid var(--line-dark); }
.analytics-window { position: relative; margin-top: 68px; padding: 28px; overflow: hidden; color: var(--paper-text); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background-color: #eeeef3; background-image: radial-gradient(circle at 90% 90%, rgba(39,66,245,.11), transparent 34%); box-shadow: 0 36px 75px rgba(0,0,0,.3); }
.analytics-window::before { position: absolute; z-index: 0; inset: 0; pointer-events: none; content: ""; opacity: .3; background-image: var(--grain-texture); animation: grain-drift 1.3s steps(6) infinite; }
.analytics-window > * { position: relative; z-index: 1; }
.analytics-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }.analytics-top > span { display: flex; align-items: center; gap: 8px; color: #52525b; }.analytics-top > span i { width: 7px; height: 7px; border-radius: 50%; background: #0891b2; }
.analytics-top button { margin-left: 5px; padding: 7px 11px; color: #52525b; border: 1px solid #d5d5db; border-radius: 6px; background: #fff; font-size: 10px; }.analytics-top button.active { color: #fff; border-color: #25252b; background: #25252b; }
.analytics-label { margin-top: 20px; }.analytics-label span:last-child { letter-spacing: 0; }.analytics-label i { display: inline-block; width: 14px; height: 2px; margin-right: 4px; background: var(--primary); vertical-align: middle; }
.vitals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 11px; }
.vitals-grid article { position: relative; min-height: 176px; padding: 20px; overflow: hidden; border: 1px solid #dadadf; border-radius: 9px; background: rgba(255,255,255,.92); }.vitals-grid small { display: block; max-width: 75%; color: #68686f; font: 600 9px/1.3 var(--mono); letter-spacing: .13em; }.vitals-grid .delta { position: absolute; top: 20px; right: 20px; color: #8a8a91; font: 600 10px var(--mono); }.vitals-grid .delta.good { color: #06864c; }.vitals-grid .delta.bad { color: #d63729; }.vitals-grid strong { display: block; margin-top: 12px; font-size: 28px; line-height: 1; }.vitals-grid svg { width: 100%; height: 52px; margin-top: 24px; overflow: visible; fill: none; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; }.vitals-grid svg path:not(.prior) { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw-line 2.4s ease-out forwards; }.vitals-grid article:nth-child(2) svg path:not(.prior) { animation-delay: .18s; }.vitals-grid article:nth-child(3) svg path:not(.prior) { animation-delay: .36s; }.vitals-grid svg .prior { stroke: #a7a7ad; stroke-width: 1.3; stroke-dasharray: 4 4; }
.rhythm-card { display: grid; grid-template-columns: 2.3fr 1fr; margin-top: 26px; overflow: hidden; border: 1px solid #dadadf; border-radius: 9px; background: rgba(255,255,255,.92); }
.heatmap-panel { padding: 24px; }.heatmap-panel > p { margin: 0 0 16px; color: #595960; font-size: 12px; }.heatmap { display: grid; grid-template-columns: 32px repeat(10, 1fr); gap: 4px; align-items: center; }.heatmap small { color: #99999f; font: 7px var(--mono); text-align: center; }.heatmap b { color: #77777e; font: 8px var(--mono); }.heatmap i { display: grid; height: 22px; place-items: center; border-radius: 4px; background: #f2f3fd; color: #fff; font: 700 8px var(--mono); }.heatmap i.h1 { background: #e7e9fd; }.heatmap i.h2 { background: #d4d9fb; }.heatmap i.h3 { background: #b8c1fa; }.heatmap i.h4 { background: #7f91f7; animation: heat-pulse 2.8s ease-in-out infinite; }.heatmap i.h4:nth-of-type(6n) { animation-delay: .7s; }.heatmap i.mark { outline: 1px solid #f05252; outline-offset: -2px; }
.weight-panel { padding: 24px; border-left: 1px solid #dddde2; }.weight-panel > small { color: #929298; font: 600 9px var(--mono); letter-spacing: .13em; }.weight-panel > div { display: grid; grid-template-columns: 26px 1fr 32px; align-items: center; gap: 9px; margin-top: 13px; font-size: 10px; }.weight-panel > div > i { height: 7px; overflow: hidden; border-radius: 8px; background: #ececf0; }.weight-panel > div b { display: block; height: 100%; border-radius: inherit; background: var(--cyan); transform-origin: left; animation: grow-bar 1.4s cubic-bezier(.2,.8,.2,1) both; }.weight-panel > div:nth-of-type(2) b { animation-delay: .1s; }.weight-panel > div:nth-of-type(3) b { animation-delay: .2s; }.weight-panel > div:nth-of-type(4) b { animation-delay: .3s; }.weight-panel > div:nth-of-type(5) b { animation-delay: .4s; }.weight-panel > div strong { font: 600 9px var(--mono); }.weight-panel p { margin: 20px 0 0; color: #66666d; font-size: 10px; }
.weight-panel .weight-38 { width: 38%; }.weight-panel .weight-48 { width: 48%; }.weight-panel .weight-71 { width: 71%; }.weight-panel .weight-82 { width: 82%; }.weight-panel .weight-88 { width: 88%; }

.builder-section { color: #16161a; background: #f2f2f5; }
.builder-section .section-kicker { color: #74747b; }.builder-section .section-head > p { color: #66666d; }
.builder-window { margin-top: 68px; overflow: hidden; border: 1px solid #d7d7dc; border-radius: 11px; background: #fff; box-shadow: 0 36px 70px rgba(24,24,29,.16); }
.builder-topbar { height: 60px; padding: 0 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #dedee3; }.builder-topbar > strong { min-width: 180px; padding: 8px 12px; border: 1px solid #dadadf; border-radius: 7px; font-size: 12px; font-weight: 500; }.builder-topbar > small { padding: 3px 7px; color: #06864c; border: 1px solid #d9e5de; border-radius: 4px; font: 600 8px var(--mono); letter-spacing: .12em; }.builder-topbar > i { color: #99999f; font-size: 10px; font-style: normal; }.builder-topbar > div { margin-left: auto; display: flex; align-items: center; gap: 12px; }.builder-topbar .save-state { display: flex; align-items: center; gap: 6px; color: #85858d; font: 500 8px var(--mono); }.builder-topbar .save-state i { width: 5px; height: 5px; border-radius: 50%; background: var(--live); }.builder-topbar > div > b { padding: 9px 14px; border-radius: 6px; color: #fff; background: var(--primary); font-size: 10px; }
.builder-body { min-height: 540px; }
.flow-workspace { position: relative; min-height: 540px; overflow: hidden; background-color: #fff; background-image: radial-gradient(#d1d5db .75px, transparent .75px); background-size: 12px 12px; }.flow-edges { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }.flow-edges path { fill: none; stroke: #aeb7ec; stroke-width: 1.8; vector-effect: non-scaling-stroke; }.flow-edges .flow-edge-active { stroke-dasharray: 7 7; animation: edge-flow 1.1s linear infinite; }.flow-edges .edge-delay { animation-delay: .55s; }.flow-edges circle { fill: #fff; stroke: #aeb7ec; stroke-width: 2; vector-effect: non-scaling-stroke; }.flow-glow { position: absolute; z-index: 0; top: 80px; left: 50%; width: 440px; height: 300px; border-radius: 50%; background: rgba(39,66,245,.12); filter: blur(70px); transform: translateX(-50%); animation: flow-glow 4s ease-in-out infinite alternate; }
.flow-node { position: absolute; z-index: 3; width: 260px; color: #18181b; animation: node-arrive .8s cubic-bezier(.2,.8,.2,1) both; }.flow-node header { display: flex; align-items: center; gap: 8px; padding: 0 4px 7px; }.flow-node header i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; color: #0369a1; background: #f0f9ff; font-size: 15px; font-style: normal; }.flow-node header strong { font-size: 13px; }.flow-node > div:not(.message-box) { padding: 12px; display: flex; align-items: center; gap: 8px; border: 1px solid #d9d9de; border-radius: 11px; background: #fff; box-shadow: 0 8px 24px rgba(24,24,29,.07); font-size: 11px; }.flow-node > div b { margin-left: auto; color: #a1a1a8; }.flow-node > p { width: 100%; margin: -3px 0 0; padding: 13px; color: #71717a; border: 1px solid #d9d9de; border-top: 0; border-radius: 0 0 11px 11px; background: #fff; font-size: 10px; }.trigger-node { top: 170px; left: 7%; }.message-node { top: 170px; left: 38%; animation-delay: .18s; }.transfer-node { top: 170px; left: 72%; animation-delay: .36s; }
.message-node { width: 300px; }.message-node > .message-box { position: relative; min-height: 104px; padding: 15px; border: 1px solid #d9d9de; border-radius: 11px 11px 0 0; background: #fff; font-size: 13px; line-height: 1.5; }.message-box small { position: absolute; right: 12px; bottom: 9px; color: #74747b; font: 9px var(--mono); }.message-node > button { width: 100%; padding: 13px; color: #77777e; border: 1px dashed #d0d0d6; border-top: 0; border-radius: 0 0 11px 11px; background: #fff; font-size: 11px; font-weight: 600; }.transfer-node header i { color: #52525b; background: #f4f4f5; }
.mini-map { position: absolute; right: 18px; bottom: 55px; width: 140px; height: 86px; padding: 9px; border: 1px solid #d6d6dc; border-radius: 6px; background: rgba(255,255,255,.9); box-shadow: 0 4px 15px rgba(0,0,0,.08); }.mini-map span { display: block; height: 100%; border: 1px solid #cbd5ff; background: linear-gradient(24deg, transparent 38%, #94a3b8 39% 48%, transparent 49% 54%, #94a3b8 55% 63%, transparent 64%); }.zoom-control { position: absolute; right: 18px; bottom: 16px; padding: 7px 10px; color: #74747b; border: 1px solid #dddde2; border-radius: 7px; background: #fff; font: 9px var(--mono); }

.system-section { border-top: 1px solid var(--line-dark); background: #101013; }
.system-grid { display: grid; grid-template-columns: 1.2fr 1fr; border-top: 1px solid var(--line-dark); }
.system-grid > article { min-height: 230px; padding: 36px 30px; border-bottom: 1px solid var(--line-dark); }.system-grid > article:nth-child(odd) { border-right: 1px solid var(--line-dark); }
.system-lead { grid-row: span 3; display: flex; flex-direction: column; justify-content: center; }.system-lead h2 { max-width: 520px; margin: 17px 0 0; font-size: clamp(46px, 5vw, 70px); font-weight: 550; line-height: 1; letter-spacing: -.055em; }.system-lead > p:last-child { max-width: 430px; margin: 28px 0 0; color: #92929c; font-size: 16px; line-height: 1.7; }
.system-card { display: grid; grid-template-columns: 44px 1fr; gap: 18px; }.system-card > span { color: #5f5f69; font: 600 10px var(--mono); }.system-card small { color: #70707b; font: 600 9px var(--mono); letter-spacing: .13em; }.system-card h3 { max-width: 500px; margin: 14px 0 0; font-size: 22px; font-weight: 520; line-height: 1.35; letter-spacing: -.025em; }
.channel-constellation, .system-radar, .handoff-visual { position: relative; height: 58px; margin-top: 18px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); }
.channel-constellation::before { position: absolute; top: 29px; right: 15%; left: 15%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, #39416d, #5269ff, #39416d, transparent); }.channel-constellation b, .channel-constellation i { position: absolute; top: 17px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; font: 700 8px var(--mono); font-style: normal; }.channel-constellation b { z-index: 2; left: calc(50% - 13px); color: #fff; background: var(--primary); box-shadow: 0 0 22px rgba(82,105,255,.5); animation: live-pulse 2s ease-in-out infinite; }.channel-constellation i { color: #aaaab4; border: 1px solid #33333c; background: #202026; animation: channel-float 3.2s ease-in-out infinite; }.channel-constellation i:nth-of-type(1) { left: 8%; }.channel-constellation i:nth-of-type(2) { left: 28%; animation-delay: .35s; }.channel-constellation i:nth-of-type(3) { right: 28%; animation-delay: .7s; }.channel-constellation i:nth-of-type(4) { right: 8%; animation-delay: 1.05s; }
.system-radar > i { position: absolute; top: 10px; left: 50%; width: 42px; height: 42px; border: 1px solid rgba(82,105,255,.25); border-radius: 50%; transform: translateX(-50%); }.system-radar > i:nth-child(2) { top: 2px; width: 58px; height: 58px; border-style: dashed; animation: radar-spin 9s linear infinite; }.system-radar > b { position: absolute; z-index: 2; top: 19px; left: 50%; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--primary); box-shadow: 0 0 20px rgba(82,105,255,.42); font: 700 7px var(--mono); transform: translateX(-50%); }.system-radar > span { position: absolute; top: 24px; color: #777782; font: 600 7px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.system-radar > span:nth-of-type(1) { left: 10%; }.system-radar > span:nth-of-type(2) { right: 10%; }
.handoff-visual { display: flex; align-items: center; gap: 0; }.handoff-visual > i, .handoff-visual > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; font: 700 7px var(--mono); font-style: normal; }.handoff-visual > i { color: #fff; background: var(--primary); box-shadow: 0 0 18px rgba(82,105,255,.35); }.handoff-visual > span { position: relative; width: 84px; height: 1px; background: #3e4263; }.handoff-visual > span::after { position: absolute; top: -2px; width: 5px; height: 5px; content: ""; border-radius: 50%; background: #7182ff; animation: route-travel 2s ease-in-out infinite; }.handoff-visual > b { margin-left: -4px; color: #d5d5db; border: 2px solid #15151a; background: #3b3b44; }.handoff-visual > b + b { margin-left: -8px; background: #176d50; }.handoff-visual > em { margin-left: 12px; color: #777782; font: 500 7px var(--mono); font-style: normal; }

.pricing-section { background: #17171c; border-top: 1px solid var(--line-dark); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 64px; }
.pricing-card { position: relative; min-height: 560px; padding: 30px; display: flex; flex-direction: column; border: 1px solid #34343b; border-radius: 9px; background: linear-gradient(150deg, #202025, #19191e); }.pricing-card.featured { border-color: #5269ff; background: linear-gradient(155deg, rgba(39,66,245,.18), #202025 36%, #19191e); box-shadow: inset 0 3px 0 var(--primary); }.plan-meta { display: flex; align-items: center; justify-content: space-between; }.plan-meta span { font: 650 10px var(--mono); letter-spacing: .13em; }.plan-meta small { color: #7e7e88; font: 600 8px var(--mono); letter-spacing: .12em; }.pricing-card.featured .plan-meta small { color: #8fa0ff; }
.pricing-card h3 { margin: 34px 0 0; font-size: 30px; font-weight: 550; }.pricing-card > p { min-height: 50px; margin: 10px 0 0; color: #9898a2; font-size: 14px; line-height: 1.55; }.plan-price { display: flex; align-items: flex-end; gap: 10px; margin-top: 26px; }.plan-price strong { font-size: 44px; font-weight: 570; line-height: 1; letter-spacing: -.055em; }.plan-price span { color: #85858e; font: 500 9px/1.35 var(--mono); }.pricing-card > em { margin-top: 11px; color: #8d8d96; font-size: 11px; font-style: normal; }.pricing-card ul { margin: 27px 0 28px; padding: 22px 0 0; border-top: 1px solid #34343b; list-style: none; }.pricing-card li { position: relative; margin-top: 11px; padding-left: 18px; color: #c0c0c8; font-size: 13px; }.pricing-card li::before { position: absolute; left: 0; content: "✓"; color: #7789ff; }.pricing-card > a { margin-top: auto; padding: 13px 15px; display: flex; justify-content: space-between; border: 1px solid #3d3d45; border-radius: 6px; background: #25252b; font-size: 12px; font-weight: 650; transition: border .18s, background .18s; }.pricing-card > a:hover { border-color: #6073ff; background: #292b3c; }.featured > a { color: #fff; border-color: var(--primary); background: var(--primary); }
.pricing-footnote { margin-top: 14px; padding: 15px 18px; display: flex; align-items: center; gap: 18px; color: #898993; border: 1px solid #303037; border-radius: 7px; background: #1e1e23; font: 500 10px var(--mono); }.pricing-footnote strong { color: #d5d5da; }.pricing-footnote a { margin-left: auto; color: #8998ff; }

.launch-cta { position: relative; overflow: hidden; padding: 140px 0; text-align: center; background: var(--primary); }.launch-cta::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 50% 110%, rgba(255,255,255,.22), transparent 50%), linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: auto, 60px 60px, 60px 60px; }.cta-noise { opacity: .19; }.cta-inner { position: relative; }.launch-cta .eyebrow { color: rgba(255,255,255,.72); }.launch-cta .live-dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.13); }.launch-cta h2 { margin: 22px 0 0; font-size: clamp(54px, 7vw, 92px); font-weight: 600; line-height: .97; letter-spacing: -.065em; }.launch-cta .cta-inner > p:not(.eyebrow) { margin: 22px 0 0; color: rgba(255,255,255,.78); font-size: 18px; }.launch-cta .cta-inner > div { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 32px; }.button-light { color: #15151a; background: #fff; }.launch-cta .cta-inner > div > a:last-child { font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }

.site-footer { padding: 72px 0 24px; color: #aaaab4; background: #0c0c0f; border-top: 1px solid var(--line-dark); }.footer-main { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; }.footer-main > div:first-child > p { margin: 21px 0 0; color: #777781; font-size: 14px; line-height: 1.6; }.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }.footer-links > div { display: flex; flex-direction: column; gap: 10px; }.footer-links strong { margin-bottom: 6px; color: #eeeef1; font: 600 9px var(--mono); letter-spacing: .13em; }.footer-links a { font-size: 12px; }.footer-links a:hover { color: #fff; }.footer-bottom { margin-top: 68px; padding-top: 19px; display: flex; justify-content: space-between; border-top: 1px solid var(--line-dark); color: #5d5d66; font: 500 9px var(--mono); }

.reveal { animation: reveal .75s cubic-bezier(.22,.7,.24,1) both; }.reveal:nth-child(2) { animation-delay: .08s; }.reveal:nth-child(3) { animation-delay: .14s; }.reveal:nth-child(4) { animation-delay: .2s; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes grain-drift {
  0% { background-position: 0 0; }
  25% { background-position: -60px 30px; }
  50% { background-position: 40px -50px; }
  75% { background-position: -30px -20px; }
  100% { background-position: 0 0; }
}
@keyframes live-pulse { 0%, 100% { opacity: .55; box-shadow: 0 0 0 3px rgba(61,220,132,.08); } 50% { opacity: 1; box-shadow: 0 0 0 6px rgba(61,220,132,.14); } }
@keyframes signal-breathe { from { opacity: .65; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }
@keyframes flow-glow { from { opacity: .65; transform: translateX(-50%) scale(.92); } to { opacity: 1; transform: translateX(-50%) scale(1.08); } }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes wave-glow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes radar-spin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes ring-settle { from { transform: rotate(-150deg) scale(.74); opacity: 0; } to { transform: rotate(24deg) scale(1); opacity: 1; } }
@keyframes route-travel { 0% { left: -5px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% + 1px); opacity: 0; } }
@keyframes agent-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes grow-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes heat-pulse { 0%, 100% { filter: saturate(.85); } 50% { filter: saturate(1.25) brightness(1.08); } }
@keyframes edge-flow { to { stroke-dashoffset: -14; } }
@keyframes node-arrive { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes channel-float { 0%, 100% { transform: translateY(0); border-color: #33333c; } 50% { transform: translateY(-3px); border-color: #4f5ba5; } }
@keyframes chat-list-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes chat-message-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes context-slide-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 1120px) {
  .nav-shell { grid-template-columns: 160px 1fr 220px; }.site-nav { gap: 22px; }
  .dashboard-stage { height: 586px; overflow: hidden; }.product-window { width: 1180px; transform: scale(.82); transform-origin: top left; }
  .builder-window { overflow: hidden; }.trigger-node { left: 7%; }.message-node { left: 38%; }.transfer-node { left: 72%; }
  .pulse-bar > p { padding-inline: 11px; }
}

@media (max-width: 820px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .nav-shell { width: calc(100% - 32px); grid-template-columns: 1fr auto; height: 68px; }.site-nav { position: fixed; top: 68px; right: 0; left: 0; padding: 24px 16px; display: none; flex-direction: column; align-items: center; gap: 18px; border-bottom: 1px solid var(--line-dark); background: rgba(16,16,19,.97); }.site-nav.is-open { display: flex; }.nav-actions { display: none; }.nav-toggle { width: 42px; height: 42px; display: grid; place-content: center; gap: 6px; cursor: pointer; }.nav-toggle i { width: 22px; height: 1px; background: #fff; transition: transform .2s; }.nav-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }.nav-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
  .hero { padding-top: 132px; }.hero h1 { font-size: clamp(52px, 14vw, 76px); }.hero-lede { max-width: 540px; font-size: 18px; }.dashboard-stage { height: 450px; margin-top: 60px; }.product-window { width: 1180px; transform: scale(.61); }.hero-statement { padding: 58px 0 84px; }
  .section { padding: 90px 0; }.section-head { grid-template-columns: 1fr; gap: 25px; }.section-head h2 { font-size: clamp(42px, 10vw, 62px); }.section-head > p { max-width: 600px; }
  .analytics-window { margin-top: 48px; padding: 20px; overflow: hidden; }.vitals-grid { grid-template-columns: repeat(3, 1fr); }.rhythm-card { grid-template-columns: 1fr; }.weight-panel { border-top: 1px solid #dddde2; border-left: 0; }
  .builder-window { margin-top: 48px; }.builder-window { height: 455px; }.builder-topbar, .builder-body { width: 1080px; transform: scale(.7); transform-origin: top left; }.builder-topbar { height: 60px; }.builder-body { min-height: 560px; }.builder-window { background: #fff; }
  .system-grid { grid-template-columns: 1fr; }.system-grid > article, .system-grid > article:nth-child(odd) { border-right: 0; }.system-lead { grid-row: auto; min-height: 400px !important; }
  .pricing-grid { grid-template-columns: 1fr; }.pricing-card { min-height: 500px; }.footer-main { grid-template-columns: 1fr; gap: 54px; }
}

@media (max-width: 540px) {
  .hero { padding-top: 112px; }.hero h1 { font-size: 53px; line-height: .97; }.hero-lede { margin-top: 24px; font-size: 16px; }.hero-actions { flex-direction: column; align-items: stretch; }.hero-actions .button { width: 100%; }.hero-note { font-size: 9px; }
  .dashboard-stage { height: 305px; margin-top: 46px; }.product-window { width: 820px; min-height: 650px; transform: scale(.436); transform-origin: top left; }.hero-statement { padding: 42px 0 68px; }.hero-statement p { font-size: 36px; }
  .section { padding: 76px 0; }.section-head h2 { font-size: 42px; }.section-head > p { font-size: 15px; }
  .analytics-window { padding: 14px; border-radius: 9px; }.analytics-top > div { display: flex; }.analytics-top button { padding: 6px 7px; }.analytics-label span:last-child { display: none; }.vitals-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }.vitals-grid article { min-height: 140px; padding: 10px; }.vitals-grid small { font-size: 6px; }.vitals-grid .delta { top: 10px; right: 10px; font-size: 7px; }.vitals-grid strong { font-size: 20px; }.vitals-grid svg { height: 33px; margin-top: 19px; }.rhythm-card { margin-top: 13px; }.heatmap-panel { padding: 14px; overflow: hidden; }.heatmap-panel > p { font-size: 10px; }.heatmap { width: 560px; transform: scale(.57); transform-origin: top left; margin-bottom: -62px; }.weight-panel { padding: 18px; }
  .builder-window { height: 220px; }.builder-topbar { display: none; }.builder-body { width: 1080px; min-height: 540px; transform: scale(.35); transform-origin: top left; }
  .system-grid > article { padding: 30px 20px; }.system-lead { min-height: 340px !important; }.system-lead h2 { font-size: 46px; }.system-card { grid-template-columns: 32px 1fr; }.system-card h3 { font-size: 19px; }
  .pricing-grid { margin-top: 44px; }.pricing-card { min-height: auto; padding: 25px; }.pricing-card ul { margin-bottom: 28px; }.pricing-card > a { margin-top: 15px; }.pricing-footnote { align-items: flex-start; flex-wrap: wrap; }.pricing-footnote a { width: 100%; margin-left: 0; }
  .launch-cta { padding: 100px 0; }.launch-cta h2 { font-size: 56px; }.launch-cta .cta-inner > div { flex-direction: column; }.footer-links { grid-template-columns: 1fr 1fr; row-gap: 40px; }.footer-bottom { gap: 20px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-noise, .cta-noise, .dashboard-canvas::before, .analytics-window::before { animation: none !important; }
}

/* Launch narrative v2 */
:root {
  --primary: #2255ff;
  --primary-light: #6d86ff;
  --deep-blue: #022ea7;
  --hero-x: 0;
  --hero-y: 0;
}

.hero {
  padding-top: 154px;
  background:
    radial-gradient(circle at 50% 23%, rgba(34, 85, 255, .19), transparent 32%),
    radial-gradient(circle at 8% 45%, rgba(2, 46, 167, .18), transparent 28%),
    linear-gradient(180deg, #111218 0%, #0e0e12 64%, #0b0b0e 100%);
}
.hero-grid { opacity: .32; background-size: 72px 72px; transform: translate3d(calc(var(--hero-x) * -7px), calc(var(--hero-y) * -5px), 0); transition: transform .35s ease-out; }
.hero-glow { top: -20px; width: 1000px; height: 720px; opacity: .9; background: radial-gradient(circle, rgba(34,85,255,.23), rgba(2,46,167,.08) 42%, transparent 70%); transform: translate3d(calc(-50% + var(--hero-x) * 12px), calc(var(--hero-y) * 9px), 0); animation: hero-glow-breathe 7s ease-in-out infinite alternate; }
.hero-network { position: absolute; z-index: 1; inset: 0; width: 100%; height: 860px; opacity: .46; pointer-events: none; transform: translate3d(calc(var(--hero-x) * 15px), calc(var(--hero-y) * 10px), 0); transition: transform .35s ease-out; }
.hero-network path { fill: none; stroke: rgba(113, 136, 255, .28); stroke-width: 1; stroke-dasharray: 4 13; vector-effect: non-scaling-stroke; animation: network-flow 9s linear infinite; }
.hero-network path:nth-child(2) { animation-duration: 13s; animation-direction: reverse; }
.hero-network path:nth-child(3), .hero-network path:nth-child(4) { stroke: rgba(255,255,255,.09); animation-duration: 17s; }
.hero-network circle { fill: #8da1ff; filter: drop-shadow(0 0 10px rgba(34,85,255,.9)); animation: node-signal 2.8s ease-in-out infinite; }
.hero-network circle:nth-of-type(even) { animation-delay: 1.1s; }
.hero-orbit { position: absolute; z-index: 1; pointer-events: none; border: 1px solid rgba(120,137,255,.13); border-radius: 50%; }
.hero-orbit::before, .hero-orbit::after { position: absolute; width: 7px; height: 7px; content: ""; border-radius: 50%; background: #7590ff; box-shadow: 0 0 20px rgba(34,85,255,.9); }
.hero-orbit-one { top: 270px; left: -210px; width: 590px; height: 590px; animation: orbit-ambient 28s linear infinite; }
.hero-orbit-one::before { top: 93px; right: 74px; }.hero-orbit-one::after { right: 15px; bottom: 184px; width: 4px; height: 4px; }
.hero-orbit-two { top: 105px; right: -260px; width: 720px; height: 720px; animation: orbit-ambient 37s linear infinite reverse; }
.hero-orbit-two::before { bottom: 70px; left: 155px; }.hero-orbit-two::after { top: 170px; left: 30px; width: 4px; height: 4px; }
.hero-copy { max-width: 1240px; }
.hero h1 { max-width: 1180px; margin-top: 24px; font-size: clamp(56px, 6.9vw, 94px); font-weight: 680; line-height: .96; letter-spacing: -.067em; text-wrap: balance; }
.hero h1 span { color: #9eafff; background: linear-gradient(96deg, #fff 0%, #abb9ff 46%, #6c86ff 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-lede { max-width: 850px; margin-top: 30px; color: #b5b7c3; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.52; text-wrap: balance; }
.hero-actions { margin-top: 31px; }.hero-note { margin-top: 13px; }
.dashboard-stage { margin-top: 92px; perspective: 1500px; animation: stage-arrive 1.15s cubic-bezier(.18,.75,.18,1) .36s both; }
.dashboard-stage::before { right: 2%; left: 2%; height: 70%; background: radial-gradient(circle, rgba(34,85,255,.38), transparent 66%); filter: blur(90px); animation: stage-aura 6s ease-in-out infinite alternate; }
.product-window { position: relative; border-radius: 8px 8px 0 0; box-shadow: 0 56px 130px rgba(0,0,0,.58), 0 0 0 1px rgba(123,143,255,.12), 0 0 80px rgba(34,85,255,.15); transform: rotateX(calc(var(--hero-y) * -1.2deg)) rotateY(calc(var(--hero-x) * 1.2deg)); transform-origin: 50% 85%; transition: transform .3s ease-out; }
.product-window::after { position: absolute; z-index: 8; top: -20%; right: 0; left: 0; height: 24%; pointer-events: none; content: ""; opacity: .34; background: linear-gradient(180deg, transparent, rgba(126,149,255,.16), transparent); animation: dashboard-scan 7s ease-in-out 1.5s infinite; }
.hero-signal { position: absolute; z-index: 10; min-width: 176px; padding: 13px 15px; pointer-events: none; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; background: rgba(18,19,26,.88); box-shadow: 0 16px 38px rgba(0,0,0,.33), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(16px); animation: signal-float 5s ease-in-out infinite; }
.hero-signal small { display: block; color: #7589ff; font: 650 7px var(--mono); letter-spacing: .13em; }.hero-signal strong { display: block; margin-top: 6px; color: #f1f2f8; font-size: 11px; }.hero-signal span { display: block; margin-top: 3px; color: #858895; font: 500 8px var(--mono); }
.hero-signal-route { top: 78px; left: -42px; }.hero-signal-context { top: 78px; right: -34px; animation-delay: -1.9s; }.hero-signal-live { right: 36px; bottom: 31px; min-width: 150px; animation-delay: -3.2s; }.hero-signal-live i { float: left; width: 6px; height: 6px; margin: 3px 7px 0 0; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(61,220,132,.1); animation: live-pulse 1.8s ease-in-out infinite; }.hero-signal-live small { color: #7c7f89; }
.hero-statement { padding: 76px 0 108px; }.hero-statement p { max-width: 840px; margin-inline: auto; color: #e9e9ed; font-size: clamp(40px, 5vw, 66px); font-weight: 570; line-height: 1.02; letter-spacing: -.055em; text-align: center; }

.proof-section { position: relative; z-index: 4; padding: 34px 0 27px; color: #e8e8ed; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); background: #121217; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-grid > div { min-height: 72px; padding: 0 24px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,.09); }.proof-grid > div:first-child { padding-left: 0; border-left: 0; }
.proof-grid strong { font-size: clamp(23px, 2.4vw, 36px); font-weight: 580; line-height: 1; letter-spacing: -.045em; }.proof-grid span { margin-top: 9px; color: #6f707a; font: 600 8px var(--mono); letter-spacing: .13em; }
.proof-note { margin-top: 22px; color: #858690; font-size: 11px; }.proof-note i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(34,85,255,.12); }

.problem-section { position: relative; overflow: hidden; padding-block: 140px; border-bottom: 1px solid var(--line-dark); background: #0e0d13; }
.problem-aura { position: absolute; top: 7%; left: -13%; width: 620px; height: 620px; border-radius: 50%; background: rgba(255,255,255,.025); filter: blur(20px); }
.problem-layout { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: 110px; align-items: start; }
.problem-copy { position: sticky; top: 128px; }.problem-copy h2 { max-width: 620px; margin: 20px 0 0; font-size: clamp(50px, 5.5vw, 76px); font-weight: 620; line-height: .98; letter-spacing: -.06em; }.problem-copy > p:last-child { max-width: 565px; margin: 30px 0 0; color: #9697a1; font-size: 17px; line-height: 1.72; }
.problem-list { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); list-style: none; }.problem-list li { min-height: 205px; padding: 34px 0; display: grid; grid-template-columns: 62px 1fr; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }.problem-list li > span { color: #565761; font: 650 10px var(--mono); }.problem-list h3 { margin: 0; font-size: 25px; font-weight: 550; line-height: 1.25; letter-spacing: -.035em; }.problem-list p { max-width: 520px; margin: 13px 0 0; color: #858690; font-size: 14px; line-height: 1.65; }

.capabilities-section { overflow: hidden; border-bottom: 1px solid var(--line-dark); background: #131318; }
.capabilities-heading h2 { color: #f3f3f6; }.capabilities-heading > p { color: #999aa4; }
.capability-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(300px, auto); gap: 12px; margin-top: 66px; }
.bento-card { position: relative; min-width: 0; padding: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 7px; background: linear-gradient(145deg, #1d1d23, #17171c); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.bento-card::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .08; background-image: var(--grain-texture); }
.bento-copy { position: relative; z-index: 2; }.bento-copy > span { color: #7589ff; font: 650 8px var(--mono); letter-spacing: .13em; }.bento-copy h3 { max-width: 470px; margin: 14px 0 0; font-size: 28px; font-weight: 570; line-height: 1.13; letter-spacing: -.045em; }.bento-copy p { max-width: 490px; margin: 12px 0 0; color: #898a94; font-size: 13px; line-height: 1.55; }
.bento-inbox { grid-column: span 7; }.bento-flows { grid-column: span 5; }.bento-agents, .bento-broadcast, .bento-reports { grid-column: span 4; }
.bento-inbox { background: radial-gradient(circle at 80% 110%, rgba(34,85,255,.22), transparent 45%), linear-gradient(145deg, #202129, #17171c); }
.inbox-visual { position: absolute; right: 30px; bottom: 28px; left: 30px; min-height: 92px; padding: 18px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.12); background: rgba(10,10,14,.62); box-shadow: 0 18px 34px rgba(0,0,0,.24); }.inbox-visual > i { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: var(--primary); font: 700 9px var(--mono); font-style: normal; }.inbox-visual div { display: flex; flex-direction: column; }.inbox-visual small { color: #8b8d98; font: 600 7px var(--mono); text-transform: uppercase; letter-spacing: .1em; }.inbox-visual b { margin-top: 4px; font-size: 12px; font-weight: 580; }.inbox-visual span { margin-top: 5px; color: #6f83ff; font: 500 8px var(--mono); }.inbox-visual em { color: #6f707a; font: 500 8px var(--mono); font-style: normal; }
.mini-flow { position: absolute; right: 27px; bottom: 38px; left: 27px; display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr; align-items: center; }.mini-flow b { min-height: 50px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); background: #22232a; font: 600 8px var(--mono); }.mini-flow i { position: relative; height: 1px; background: #3e477a; }.mini-flow i::after { position: absolute; top: -2px; left: -5px; width: 5px; height: 5px; content: ""; border-radius: 50%; background: #7890ff; animation: route-travel 2.2s ease-in-out infinite; }.mini-flow i:nth-of-type(2)::after { animation-delay: 1.1s; }
.agent-core { position: absolute; right: 30px; bottom: 22px; left: 30px; height: 105px; }.agent-core > i { position: absolute; top: 17px; left: 50%; width: 70px; height: 70px; border: 1px solid rgba(92,119,255,.28); border-radius: 50%; transform: translateX(-50%); }.agent-core > i:nth-child(2) { top: 4px; width: 96px; height: 96px; border-style: dashed; animation: radar-spin 12s linear infinite; }.agent-core > b { position: absolute; z-index: 2; top: 37px; left: 50%; width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: var(--primary); box-shadow: 0 0 30px rgba(34,85,255,.48); font: 700 8px var(--mono); transform: translateX(-50%); }.agent-core > span { position: absolute; top: 47px; color: #6f707a; font: 600 7px var(--mono); text-transform: uppercase; letter-spacing: .11em; }.agent-core > span:nth-of-type(1) { left: 2%; }.agent-core > span:nth-of-type(2) { right: 2%; }
.broadcast-visual { position: absolute; right: 30px; bottom: 30px; left: 30px; }.broadcast-visual > div { display: flex; align-items: flex-end; justify-content: space-between; }.broadcast-visual span { color: #747681; font: 600 8px var(--mono); text-transform: uppercase; }.broadcast-visual strong { font-size: 30px; font-weight: 570; letter-spacing: -.05em; }.broadcast-visual > i { height: 5px; margin-top: 15px; display: block; overflow: hidden; background: #2c2d35; }.broadcast-visual > i b { width: 71%; height: 100%; display: block; background: linear-gradient(90deg, var(--deep-blue), #718bff); transform-origin: left; animation: grow-bar 1.4s cubic-bezier(.2,.8,.2,1) both; }.broadcast-visual small { display: block; margin-top: 9px; color: #7d8ff0; font: 600 8px var(--mono); }
.report-visual { position: absolute; right: 24px; bottom: 25px; left: 24px; width: calc(100% - 48px); height: 100px; overflow: visible; }.report-visual path { fill: none; stroke: #7690ff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw-line 2.6s ease-out forwards; }.report-visual .report-area { fill: url("#none"); stroke: rgba(118,144,255,.16); stroke-width: 18; opacity: .25; }

.handoff-section { position: relative; overflow: hidden; color: #eeeef2; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); background: linear-gradient(180deg, #0d0e13, #121219 68%, #101016); }
.handoff-aura { position: absolute; top: -280px; left: 50%; width: 920px; height: 620px; pointer-events: none; border-radius: 50%; background: rgba(34,85,255,.14); filter: blur(100px); transform: translateX(-50%); }
.handoff-heading { position: relative; }.handoff-heading h2 { max-width: 830px; color: #f4f4f7; }.handoff-heading > p { color: #9697a2; }
.handoff-console { position: relative; display: grid; grid-template-columns: 310px minmax(0,1fr); min-height: 640px; margin-top: 68px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: #18191f; box-shadow: 0 38px 90px rgba(0,0,0,.34), 0 0 70px rgba(34,85,255,.08); }
.case-menu { min-width: 0; padding: 18px 12px; border-right: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, #18191f, #131419); }.case-menu-head { height: 42px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; }.case-menu-head span { color: #7e8190; font: 650 8px var(--mono); letter-spacing: .14em; }.case-menu-head small { color: #565865; font: 500 7px var(--mono); }
.case-menu button { position: relative; width: 100%; min-height: 80px; padding: 12px 13px; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 10px; color: #858792; border: 0; border-top: 1px solid rgba(255,255,255,.07); background: transparent; text-align: left; cursor: pointer; transition: color .2s, background .2s, transform .2s; }.case-menu button:last-child { border-bottom: 1px solid rgba(255,255,255,.07); }.case-menu button:hover { color: #d5d6dd; background: rgba(255,255,255,.025); }.case-menu button:focus-visible { outline: 2px solid #7890ff; outline-offset: -2px; }.case-menu button.is-active { color: #fff; background: linear-gradient(90deg, rgba(34,85,255,.19), rgba(34,85,255,.03)); box-shadow: inset 2px 0 #5271ff; }.case-menu button > i { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #333541; border-radius: 5px; color: #686b78; font: 600 7px var(--mono); font-style: normal; }.case-menu button.is-active > i { color: #fff; border-color: #4963dc; background: #263eaa; box-shadow: 0 0 18px rgba(34,85,255,.2); }.case-menu button > span { min-width: 0; display: flex; flex-direction: column; }.case-menu strong { font-size: 12px; font-weight: 560; }.case-menu small { margin-top: 5px; color: #686a75; font-size: 9px; }.case-menu button.is-active small { color: #9499ad; }
.handoff-stage { min-width: 0; padding: 27px; display: flex; flex-direction: column; color: #202127; background-color: #eeeef3; background-image: radial-gradient(circle at 82% 15%, rgba(34,85,255,.11), transparent 32%), var(--grain-texture); background-blend-mode: normal, soft-light; }.handoff-stage > header { min-height: 33px; display: flex; align-items: center; justify-content: space-between; color: #777982; font: 600 8px var(--mono); letter-spacing: .12em; }.handoff-stage > header div { display: flex; align-items: center; gap: 8px; }.handoff-stage > header i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(61,220,132,.1); animation: live-pulse 1.8s ease-in-out infinite; }.handoff-stage > header small { padding: 6px 8px; color: #4054b2; border: 1px solid #d2d7ef; border-radius: 5px; background: rgba(255,255,255,.6); font: 600 7px var(--mono); letter-spacing: .05em; }
.handoff-message { position: relative; width: min(520px, 72%); margin-top: 13px; padding: 17px 62px 17px 17px; color: #fff; border: 1px solid #343849; border-radius: 8px 8px 8px 2px; background: linear-gradient(145deg, #34394d, #171922); box-shadow: 0 16px 28px rgba(24,25,34,.14); }.handoff-message span { color: #8f9df1; font: 600 7px var(--mono); letter-spacing: .1em; }.handoff-message p { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }.handoff-message time { position: absolute; right: 15px; bottom: 16px; color: #747887; font: 500 7px var(--mono); }
.handoff-path { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 34px; margin-top: 25px; }.handoff-path::before { position: absolute; z-index: 0; top: 47px; right: 10%; left: 10%; height: 1px; content: ""; background: linear-gradient(90deg, #bdc5e9, #5572ff, #bdc5e9); }.handoff-path::after { position: absolute; z-index: 2; top: 44px; left: 9%; width: 7px; height: 7px; content: ""; border-radius: 50%; background: #2255ff; box-shadow: 0 0 0 5px rgba(34,85,255,.12), 0 0 20px rgba(34,85,255,.5); animation: handoff-travel 4.6s ease-in-out infinite; }
.handoff-path article { position: relative; z-index: 1; min-width: 0; min-height: 250px; padding: 19px; display: flex; flex-direction: column; border: 1px solid #d7d9e1; border-radius: 8px; background: rgba(255,255,255,.91); box-shadow: 0 8px 25px rgba(27,29,40,.055); }.handoff-path article > div { display: flex; align-items: center; justify-content: space-between; }.handoff-path article > div span { color: #9a9ca5; font: 600 7px var(--mono); }.handoff-path article > div b { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; border: 4px solid #eeeef3; border-radius: 50%; background: #363945; box-shadow: 0 0 0 1px #cfd1da; font: 700 8px var(--mono); }.handoff-path article:nth-child(2) > div b { border-radius: 9px; background: #2255ff; box-shadow: 0 8px 20px rgba(34,85,255,.25); }.handoff-path article:nth-child(3) > div b { background: #176f52; }.handoff-path article > small { margin-top: 24px; color: #536bd9; font: 650 7px var(--mono); letter-spacing: .12em; }.handoff-path h3 { margin: 11px 0 0; font-size: 17px; font-weight: 590; letter-spacing: -.025em; }.handoff-path p { margin: 8px 0 0; color: #71727b; font-size: 10px; line-height: 1.5; }.handoff-path em { margin-top: auto; padding-top: 13px; display: flex; align-items: center; gap: 7px; color: #797b84; border-top: 1px solid #e4e5e9; font: 600 7px var(--mono); font-style: normal; }.handoff-path em i { width: 5px; height: 5px; border-radius: 50%; background: #18a365; }
.handoff-stage > footer { min-height: 48px; margin-top: auto; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #6e7079; border: 1px solid #dbdde5; border-radius: 7px; background: rgba(255,255,255,.72); font-size: 9px; }.handoff-stage > footer span { display: flex; align-items: center; gap: 8px; }.handoff-stage > footer span i { width: 6px; height: 6px; border-radius: 50%; background: #2255ff; box-shadow: 0 0 0 4px rgba(34,85,255,.1); }.handoff-stage > footer strong { color: #304ec8; font: 650 7px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.handoff-stage.is-updating .handoff-message, .handoff-stage.is-updating .handoff-path article { animation: case-content-in .42s cubic-bezier(.2,.75,.2,1) both; }.handoff-stage.is-updating .handoff-path article:nth-child(2) { animation-delay: .05s; }.handoff-stage.is-updating .handoff-path article:nth-child(3) { animation-delay: .1s; }

.ai-where-section { position: relative; overflow: hidden; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); background: radial-gradient(circle at 50% 35%, rgba(34,85,255,.12), transparent 38%), #0e0d13; }
.ai-backdrop { position: absolute; top: 80px; right: -80px; width: 480px; height: 480px; opacity: .2; }.ai-backdrop > i { position: absolute; inset: 0; border: 1px solid #5269ff; border-radius: 50%; }.ai-backdrop > i:nth-child(2) { inset: 72px; border-style: dashed; animation: orbit-ambient 24s linear infinite; }.ai-backdrop > b { position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; display: grid; place-items: center; background: var(--primary); box-shadow: 0 0 80px rgba(34,85,255,.55); font: 700 16px var(--mono); transform: translate(-50%,-50%); }
.ai-where-head { position: relative; z-index: 2; }.ai-where-head h2 { max-width: 900px; margin: 19px 0 0; font-size: clamp(52px, 6vw, 82px); font-weight: 620; line-height: .98; letter-spacing: -.062em; }.ai-where-head > p:last-child { max-width: 620px; margin: 27px 0 0; color: #9a9ba5; font-size: 18px; }
.ai-where-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 72px; }
.ai-where-card { min-height: 390px; padding: 25px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.11); background: rgba(24,24,30,.76); backdrop-filter: blur(12px); }.ai-where-card > span { color: #7d90ff; font: 650 8px var(--mono); letter-spacing: .12em; }.ai-where-card h3 { margin: 25px 0 0; font-size: 23px; font-weight: 560; line-height: 1.2; letter-spacing: -.04em; }.ai-where-card p { margin: 12px 0 0; color: #858690; font-size: 13px; line-height: 1.58; }
.ai-card-route, .ai-card-type, .ai-score, .ai-summary { margin-top: auto; min-height: 78px; border-top: 1px solid rgba(255,255,255,.08); }
.ai-card-route { padding-top: 25px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }.ai-card-route b, .ai-card-route em { padding: 8px; border: 1px solid rgba(255,255,255,.11); font: 600 7px var(--mono); font-style: normal; }.ai-card-route em { color: #fff; border-color: #405ad3; background: #24387f; }.ai-card-route i { position: relative; height: 1px; background: #39416d; }.ai-card-route i::after { position: absolute; top: -2px; left: 0; width: 5px; height: 5px; content: ""; border-radius: 50%; background: #718bff; animation: route-travel 2s ease-in-out infinite; }
.ai-card-type { padding-top: 27px; }.ai-card-type i { display: block; height: 4px; margin-top: 7px; background: #31323a; }.ai-card-type i:nth-child(1) { width: 92%; }.ai-card-type i:nth-child(2) { width: 72%; }.ai-card-type i:nth-child(3) { width: 82%; }.ai-card-type b { display: inline-block; width: 6px; height: 12px; margin-top: 9px; background: #718bff; animation: type-cursor .85s steps(1) infinite; }
.ai-score { padding-top: 22px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }.ai-score span { color: #6f707b; font: 600 7px var(--mono); }.ai-score i { grid-column: 1; height: 4px; background: #2d2e35; }.ai-score i b { width: 92%; height: 100%; display: block; background: #718bff; animation: grow-bar 1.4s ease-out both; }.ai-score strong { grid-row: 1 / span 2; grid-column: 2; font-size: 31px; font-weight: 580; }
.ai-summary { position: relative; padding-top: 24px; }.ai-summary i { display: block; width: 90%; height: 3px; margin-top: 8px; background: #32333a; }.ai-summary i:nth-child(2) { width: 68%; }.ai-summary i:nth-child(3) { width: 79%; }.ai-summary span { position: absolute; right: 0; bottom: 2px; color: #7f92ff; font: 600 7px var(--mono); }
.ai-where-close { position: relative; z-index: 2; margin-top: 11px; padding: 24px 27px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid rgba(113,139,255,.26); background: rgba(34,85,255,.08); }.ai-where-close span { color: #7f92ff; font: 650 8px var(--mono); letter-spacing: .12em; }.ai-where-close p { margin: 0; color: #d9dae1; font-size: 14px; }

.pricing-heading h2 { max-width: 760px; }.launch-cta .cta-inner > p:not(.eyebrow) { max-width: 720px; margin-inline: auto; line-height: 1.6; }
section[id] { scroll-margin-top: 78px; }

.reveal { opacity: 1; animation: none; }.reveal.is-observed { opacity: 0; transform: translateY(28px); }.reveal.is-visible { animation: scroll-reveal .85s cubic-bezier(.18,.72,.18,1) both; }

@keyframes network-flow { to { stroke-dashoffset: -170; } }
@keyframes node-signal { 0%, 100% { opacity: .25; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes orbit-ambient { to { transform: rotate(360deg); } }
@keyframes hero-glow-breathe { from { opacity: .62; scale: .94; } to { opacity: 1; scale: 1.08; } }
@keyframes stage-arrive { from { opacity: 0; transform: translateY(58px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes stage-aura { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.06); } }
@keyframes dashboard-scan { 0%, 16% { transform: translateY(-120%); opacity: 0; } 28% { opacity: .38; } 56% { transform: translateY(580%); opacity: 0; } 100% { transform: translateY(580%); opacity: 0; } }
@keyframes signal-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes type-cursor { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes scroll-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes handoff-travel { 0% { left: 9%; opacity: 0; } 12% { opacity: 1; } 48% { left: 49%; } 88% { opacity: 1; } 100% { left: 90%; opacity: 0; } }
@keyframes handoff-travel-mobile { 0% { top: 7%; opacity: 0; } 12% { opacity: 1; } 48% { top: 49%; } 88% { opacity: 1; } 100% { top: 91%; opacity: 0; } }
@keyframes case-content-in { from { opacity: .35; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (max-width: 1120px) {
  .hero h1 { font-size: clamp(54px, 8vw, 82px); }.hero-signal-route { left: 12px; }.hero-signal-context { right: 12px; }.hero-signal-live { display: none; }
  .problem-layout { gap: 60px; }.capability-bento { grid-auto-rows: minmax(285px, auto); }.handoff-console { grid-template-columns: 270px minmax(0,1fr); }.case-menu button { padding-inline: 10px; }.handoff-path { gap: 18px; }.handoff-stage { padding: 22px; }.ai-where-grid { grid-template-columns: repeat(2, 1fr); }.ai-where-card { min-height: 340px; }
}

@media (max-width: 820px) {
  .hero { padding-top: 126px; }.hero h1 { font-size: clamp(48px, 11vw, 72px); }.hero-network { height: 720px; }.hero-orbit { opacity: .5; }.hero-signal { display: none; }
  .proof-grid { grid-template-columns: 1fr 1fr; row-gap: 24px; }.proof-grid > div:nth-child(3) { padding-left: 0; border-left: 0; }.proof-note { margin-top: 30px; }
  .problem-section { padding-block: 96px; }.problem-layout { grid-template-columns: 1fr; gap: 65px; }.problem-copy { position: static; }.problem-list li { min-height: 170px; }
  .capability-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(290px, auto); }.bento-inbox, .bento-flows, .bento-agents, .bento-broadcast, .bento-reports { grid-column: auto; }.bento-inbox { grid-column: span 2; }.bento-reports { grid-column: span 2; }
  .handoff-console { grid-template-columns: 1fr; }.case-menu { padding: 0; display: grid; grid-template-columns: repeat(6, minmax(210px,1fr)); overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); scroll-snap-type: x mandatory; scrollbar-width: none; }.case-menu::-webkit-scrollbar { display: none; }.case-menu-head { display: none; }.case-menu button { min-height: 82px; scroll-snap-align: start; border-top: 0; border-right: 1px solid rgba(255,255,255,.07); }.case-menu button:last-child { border-bottom: 0; }.handoff-stage { min-height: 540px; }.handoff-path article { min-height: 235px; }
  .ai-where-head h2 { max-width: 720px; }.ai-backdrop { right: -240px; }.ai-where-close { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 540px) {
  .hero { padding-top: 106px; }.hero h1 { font-size: 47px; line-height: .99; letter-spacing: -.058em; }.hero-lede { font-size: 16px; line-height: 1.55; }.hero-network { height: 620px; opacity: .34; }.hero-orbit-two { right: -500px; }.hero-statement p { font-size: 38px; }
  .proof-section { padding-top: 27px; }.proof-grid { row-gap: 17px; }.proof-grid > div { min-height: 62px; padding: 0 14px; }.proof-grid strong { font-size: 24px; }.proof-grid span { font-size: 6px; }.proof-note { font-size: 9px; }
  .problem-copy h2 { font-size: 46px; }.problem-copy > p:last-child { font-size: 15px; }.problem-list li { grid-template-columns: 38px 1fr; gap: 11px; }.problem-list h3 { font-size: 21px; }
  .capability-bento { grid-template-columns: 1fr; grid-auto-rows: minmax(300px, auto); margin-top: 46px; }.bento-inbox, .bento-flows, .bento-agents, .bento-broadcast, .bento-reports { grid-column: auto; }.bento-card { padding: 23px; }.bento-copy h3 { font-size: 25px; }.inbox-visual { right: 22px; bottom: 22px; left: 22px; grid-template-columns: 38px 1fr; }.inbox-visual em { display: none; }.inbox-visual > i { width: 38px; height: 38px; }.mini-flow { right: 20px; left: 20px; grid-template-columns: 1fr 22px 1fr 22px 1fr; }.mini-flow b { font-size: 6px; }
  .handoff-heading h2 { font-size: 43px; }.handoff-console { margin-top: 46px; border-radius: 8px; }.case-menu { grid-template-columns: repeat(6, 198px); }.case-menu button { min-height: 76px; }.handoff-stage { min-height: 0; padding: 16px; }.handoff-stage > header { align-items: flex-start; gap: 8px; }.handoff-stage > header small { max-width: 145px; text-align: right; }.handoff-message { width: 100%; padding: 15px 55px 15px 14px; }.handoff-path { grid-template-columns: 1fr; gap: 12px; }.handoff-path::before { top: 8%; bottom: 8%; left: 39px; width: 1px; height: auto; background: linear-gradient(#bdc5e9, #5572ff, #bdc5e9); }.handoff-path::after { top: 7%; left: 36px; animation-name: handoff-travel-mobile; }.handoff-path article { min-height: 166px; padding: 15px 16px 14px 76px; }.handoff-path article > div { position: absolute; top: 15px; left: 15px; display: block; }.handoff-path article > div span { display: none; }.handoff-path article > div b { width: 44px; height: 44px; }.handoff-path article > small { margin-top: 0; }.handoff-path h3 { margin-top: 8px; }.handoff-path em { margin-top: 15px; }.handoff-stage > footer { margin-top: 14px; padding: 12px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .ai-where-head h2 { font-size: 43px; }.ai-where-head > p:last-child { font-size: 16px; }.ai-where-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 42px; }.ai-where-card { min-height: 274px; padding: 22px; }.ai-where-card h3 { margin-top: 18px; font-size: 22px; }.ai-where-card p { margin-top: 10px; }.ai-card-route, .ai-card-type, .ai-score, .ai-summary { min-height: 62px; }.ai-card-route { padding-top: 18px; }.ai-card-type { padding-top: 18px; }.ai-score { padding-top: 16px; }.ai-summary { padding-top: 16px; }.ai-backdrop { opacity: .1; }.ai-where-close { padding: 20px; gap: 12px; }.ai-where-close p { font-size: 13px; }

  /* Mobile product view: recompose the interface instead of shrinking desktop UI. */
  .dashboard-stage { height: auto; margin-top: 52px; padding-bottom: 0; perspective: none; }
  .product-window { width: 100%; min-height: 0; border-radius: 9px; transform: none; }
  .product-main { padding-bottom: 0; }
  .product-topbar { height: 48px; padding: 0 13px; }
  .product-identity { gap: 7px; }.product-identity > b { width: 26px; height: 26px; }.product-identity > strong { font-size: 11px; }.product-identity > span { display: none; }
  .product-live { font-size: 7px; letter-spacing: .06em; }
  .dashboard-canvas { min-height: 0; padding: 16px 13px 14px; overflow: hidden; }
  .product-section-label { font-size: 6px; }.product-section-label span:last-child { display: none; }
  .spotlight-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .spotlight-card { min-height: 216px; padding: 13px; border-radius: 7px; }
  .spotlight-card-head { gap: 5px; }.spotlight-card-head small, .spotlight-card-head span { font-size: 6px; }
  .spotlight-inbound > strong { margin-top: 22px; font-size: 36px; }.spotlight-inbound > p { font-size: 8px; }.message-wave { height: 58px; margin-top: 11px; }.spotlight-inbound footer { right: 13px; bottom: 12px; left: 13px; gap: 3px; }.spotlight-inbound footer span { padding: 3px 4px; font-size: 5px; }
  .ai-resolution { grid-template-columns: 1fr; justify-items: center; gap: 4px; margin-top: 9px; }.ai-rings { width: 82px; height: 82px; }.ai-rings > i:nth-child(2) { inset: 8px; }.ai-rings > i:nth-child(3) { inset: 17px; border-width: 5px; }.ai-rings strong { font-size: 19px; }.resolution-copy { text-align: center; }.resolution-copy > strong { font-size: 10px; }.resolution-copy > p, .resolution-copy > span { display: none; }.route-visual { grid-template-columns: auto 1fr 24px 1fr auto; gap: 4px; margin-top: 9px; padding: 7px 6px; }.route-visual span { font-size: 5px; }.route-visual > b { width: 24px; height: 24px; font-size: 7px; }
  .spotlight-team { grid-column: span 2; min-height: 132px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; column-gap: 10px; }.spotlight-team .spotlight-card-head { grid-column: 1 / -1; }.team-queue { margin-top: 12px; }.team-queue strong { font-size: 34px; }.team-queue p { font-size: 8px; }.agent-stack { align-self: center; margin-top: 8px; }.agent-stack i { width: 29px; height: 29px; border-width: 2px; font-size: 6px; }.spotlight-team dl { grid-column: 1 / -1; margin-top: 8px; padding-top: 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.spotlight-team dl div { margin-top: 0; font-size: 7px; }.spotlight-team dd { font-size: 7px; }
  .signal-strip { display: grid; grid-template-columns: 1fr 1fr; }.signal-strip span { min-height: 34px; padding: 0 8px; justify-content: center; font-size: 6px; }.signal-strip span:nth-child(3) { border-left: 0; border-top: 1px solid #e0e0e5; }.signal-strip span:nth-child(4) { border-top: 1px solid #e0e0e5; }
  .pulse-bar { position: static; width: auto; height: 50px; border-width: 1px 0 0; border-radius: 0; box-shadow: none; }.view-tabs { width: 100%; }.view-tabs button { flex: 1; font-size: 10px; }.pulse-bar > p, .status-line { display: none; }

  .agent-workbench { height: 538px; grid-template-columns: 1fr; margin-top: 10px; }
  .conversation-list { display: none; }
  .agent-conversation { grid-template-rows: 48px minmax(0, 1fr) 48px; }
  .conversation-head { padding-inline: 11px; }.conversation-head i { width: 28px; height: 28px; }.conversation-head span strong { font-size: 9px; }
  .conversation-body { display: grid; grid-template-columns: 1fr; grid-template-rows: 252px minmax(0, 1fr); }
  .message-stream { padding: 11px; }.chat-bubble { max-width: 88%; padding: 9px 9px 15px; font-size: 9px; }.chat-event { width: 94%; font-size: 7px; }
  .agent-context { padding: 12px; border-top: 1px solid #e1e1e6; border-left: 0; }.agent-context > p { margin-top: 9px; font-size: 7px; }.agent-context dl { margin-top: 9px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.agent-context dl div { margin-top: 0; display: block; }.agent-context dd { margin-top: 3px; }.agent-context > button { margin-top: 9px; }
  .conversation-composer { padding-left: 11px; }.conversation-composer button { padding-inline: 8px; }

  /* Metrics stay full-size and become a swipeable card deck. */
  .vitals-grid { display: flex; gap: 9px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }.vitals-grid::-webkit-scrollbar { display: none; }
  .vitals-grid article { min-height: 158px; padding: 16px; flex: 0 0 82%; scroll-snap-align: start; }.vitals-grid small { font-size: 8px; }.vitals-grid .delta { top: 16px; right: 16px; font-size: 9px; }.vitals-grid strong { font-size: 30px; }.vitals-grid svg { height: 46px; margin-top: 22px; }
  .heatmap-panel { padding: 16px; overflow-x: auto; scrollbar-width: thin; }.heatmap-panel > p { position: sticky; left: 0; width: 300px; font-size: 11px; }.heatmap { width: 540px; margin-bottom: 0; transform: none; }.weight-panel { padding: 19px; }

  /* The flow builder becomes a readable vertical journey on narrow screens. */
  .builder-window { height: auto; overflow: hidden; }
  .builder-topbar, .builder-body { width: auto; transform: none; }
  .builder-topbar { height: 54px; padding: 0 14px; display: flex; }.builder-topbar > strong { min-width: 0; padding: 0; flex: 1; border: 0; font-size: 11px; }.builder-topbar > i, .builder-topbar > div { display: none; }.builder-topbar > small { font-size: 7px; }
  .builder-body { min-height: 0; }
  .flow-workspace { min-height: 0; padding: 42px 18px; display: flex; flex-direction: column; gap: 48px; }
  .flow-edges { display: none; }.flow-glow { top: 25%; width: 260px; height: 390px; }
  .flow-node, .message-node, .trigger-node, .transfer-node { position: relative; top: auto; left: auto; width: 100%; }
  .flow-node:not(:last-of-type)::after { position: absolute; z-index: -1; bottom: -39px; left: 50%; width: 1px; height: 30px; content: ""; background: linear-gradient(#aeb7ec, #6f86ff); }
  .flow-node header strong { font-size: 12px; }.flow-node > div:not(.message-box) { font-size: 10px; }.flow-node > p { font-size: 9px; }.message-node > .message-box { min-height: 94px; font-size: 11px; }
}

@media (min-width: 541px) and (max-width: 820px) {
  .dashboard-stage { height: auto; margin-top: 64px; padding-bottom: 0; perspective: none; }
  .product-window { width: 100%; min-height: 0; transform: none; }
  .product-main { padding-bottom: 0; }
  .dashboard-canvas { min-height: 0; padding-bottom: 18px; }
  .spotlight-grid { grid-template-columns: 1fr 1fr; }
  .spotlight-team { grid-column: span 2; min-height: 188px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; column-gap: 24px; }.spotlight-team .spotlight-card-head { grid-column: 1 / -1; }.spotlight-team .team-queue { margin-top: 20px; }.spotlight-team .agent-stack { align-self: center; margin-top: 14px; }.spotlight-team dl { grid-column: 1 / -1; margin-top: 10px; padding-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.spotlight-team dl div { margin-top: 0; }
  .signal-strip { display: grid; grid-template-columns: repeat(4, 1fr); }.signal-strip span { padding-inline: 10px; justify-content: center; }
  .pulse-bar { position: static; width: auto; height: 50px; border-width: 1px 0 0; border-radius: 0; box-shadow: none; }.pulse-bar > p { flex: 1; justify-content: center; padding-inline: 8px; }.pulse-bar > p:nth-last-child(-n + 2) { display: none; }
  .status-line { display: none; }

  .agent-workbench { height: 500px; grid-template-columns: 1fr; }
  .conversation-list { display: none; }
  .conversation-body { grid-template-columns: minmax(0, 1fr) 220px; }

  .builder-window { height: auto; }
  .builder-topbar, .builder-body { width: auto; transform: none; }
  .builder-body { min-height: 0; }
  .flow-workspace { min-height: 0; padding: 52px 64px; display: flex; flex-direction: column; align-items: center; gap: 54px; }
  .flow-edges { display: none; }.flow-glow { top: 25%; width: 380px; height: 440px; }
  .flow-node, .message-node, .trigger-node, .transfer-node { position: relative; top: auto; left: auto; width: 100%; max-width: 520px; }
  .flow-node:not(:last-of-type)::after { position: absolute; z-index: -1; bottom: -43px; left: 50%; width: 1px; height: 32px; content: ""; background: linear-gradient(#aeb7ec, #6f86ff); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-network path, .hero-network circle, .hero-orbit, .hero-glow, .dashboard-stage, .dashboard-stage::before, .product-window::after, .hero-signal, .mini-flow i::after, .agent-core > i:nth-child(2), .broadcast-visual > i b, .report-visual path, .handoff-path::after, .handoff-stage > header i, .handoff-stage.is-updating .handoff-message, .handoff-stage.is-updating .handoff-path article, .ai-backdrop > i:nth-child(2), .ai-card-route i::after, .ai-card-type b, .ai-score i b { animation: none !important; }
  .hero-grid, .hero-glow, .hero-network, .product-window { transform: none !important; }
  .reveal.is-observed { opacity: 1; transform: none; }
}