:root {
  --navy: #202c55;
  --navy-deep: #111a35;
  --navy-ink: #17233e;
  --teal: #43a7b9;
  --teal-bright: #6ed3d1;
  --teal-soft: #dff3f3;
  --paper: #f5f7f7;
  --white: #ffffff;
  --ink: #17223b;
  --muted: #637080;
  --line: #dce2e4;
  --warm: #eef0eb;
  --orange: #ed9c5c;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --container: 1240px;
  --shadow: 0 24px 80px rgba(22, 36, 64, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Manrope", sans-serif; letter-spacing: -.045em; }
.container { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 9999; padding: 10px 15px; background: var(--navy); color: white; border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 18px 24px; transition: padding .3s ease; }
.nav-shell { width: min(100%, 1320px); height: 68px; margin: 0 auto; padding: 0 10px 0 20px; border: 1px solid rgba(32,44,85,.1); border-radius: 20px; background: rgba(250,252,252,.82); backdrop-filter: blur(18px); display: grid; grid-template-columns: 205px 1fr 205px; align-items: center; box-shadow: 0 8px 32px rgba(24,34,60,.04); transition: box-shadow .3s, background .3s; }
.site-header.scrolled { padding-top: 10px; }
.site-header.scrolled .nav-shell { background: rgba(250,252,252,.96); box-shadow: 0 10px 40px rgba(24,34,60,.09); }
.brand img { width: 136px; height: auto; }
.desktop-nav { display: flex; justify-content: center; gap: 30px; }
.desktop-nav a { position: relative; color: #424d61; font-size: 14px; font-weight: 500; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 100%; height: 1px; background: var(--teal); transform: scaleX(0); transform-origin: right; transition: transform .25s; }
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.desktop-cta { justify-self: end; }
.button { display: inline-flex; min-height: 54px; padding: 0 24px; border: 0; border-radius: 14px; align-items: center; justify-content: center; gap: 14px; font-weight: 600; font-size: 15px; cursor: pointer; transition: transform .25s, background .25s, box-shadow .25s; }
.button:hover { transform: translateY(-2px); }
.button-sm { min-height: 46px; border-radius: 12px; padding: 0 18px; font-size: 14px; }
.button-dark { background: var(--navy); color: white; box-shadow: 0 8px 20px rgba(32,44,85,.15); }
.button-dark:hover { background: #152044; }
.button-primary { background: var(--teal); color: #0b2430; box-shadow: 0 14px 32px rgba(67,167,185,.22); }
.button-primary:hover { background: #59bcc7; box-shadow: 0 17px 40px rgba(67,167,185,.3); }
.button-light { background: white; color: var(--navy); }
.menu-toggle, .mobile-panel { display: none; }

.hero { position: relative; min-height: 920px; padding: 178px 0 38px; overflow: hidden; background: linear-gradient(180deg, #fbfcfc 0%, #f4f7f7 70%, #eef3f2 100%); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(32,44,85,.032) 1px, transparent 1px), linear-gradient(90deg, rgba(32,44,85,.032) 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.orb-one { width: 580px; height: 580px; right: -170px; top: 90px; background: radial-gradient(circle, rgba(88,199,203,.19), transparent 66%); }
.orb-two { width: 420px; height: 420px; left: -260px; bottom: 40px; background: radial-gradient(circle, rgba(90,117,183,.10), transparent 68%); }
.hero-grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 66px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #566276; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; }
.live-dot { position: relative; width: 8px; height: 8px; background: var(--teal); border-radius: 50%; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border: 1px solid rgba(67,167,185,.38); border-radius: inherit; animation: pulse-ring 2s infinite; }
.hero h1 { margin: 28px 0 26px; font-size: clamp(64px, 6.25vw, 96px); line-height: .98; font-weight: 500; color: var(--navy-ink); }
.hero h1 span { color: var(--teal); }
.hero-lead { max-width: 610px; margin-bottom: 34px; color: #576579; font-size: 19px; line-height: 1.62; }
.hero-actions { display: flex; align-items: center; gap: 26px; }
.text-link { font-size: 14px; font-weight: 600; color: var(--navy); }
.text-link span { display: inline-block; margin-left: 8px; transition: transform .25s; }
.text-link:hover span { transform: translateY(4px); }
.hero-proof { margin-top: 48px; display: flex; align-items: center; gap: 14px; }
.proof-faces { display: flex; }
.proof-faces span { width: 36px; height: 36px; margin-left: -7px; border: 2px solid white; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: white; font-size: 9px; font-weight: 700; }
.proof-faces span:first-child { margin-left: 0; background: var(--teal); color: var(--navy); }
.proof-faces span:last-child { background: #f0b982; }
.hero-proof p { margin: 0; color: #657083; font-size: 12px; line-height: 1.35; }
.hero-proof strong { color: var(--navy); font-size: 13px; }

.system-stage { position: relative; min-height: 620px; border: 1px solid rgba(32,44,85,.12); border-radius: 30px; background: rgba(255,255,255,.84); box-shadow: 0 35px 100px rgba(27,43,73,.14), inset 0 1px white; backdrop-filter: blur(16px); overflow: hidden; transform: perspective(1200px) rotateY(-2deg); transform-origin: center right; }
.system-stage::after { content: ""; position: absolute; width: 180px; height: 180px; right: -55px; top: -55px; border-radius: 50%; background: var(--teal); opacity: .08; filter: blur(20px); }
.stage-topbar { height: 62px; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e4e9e9; color: #6c7687; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.stage-topbar div { display: flex; align-items: center; gap: 9px; color: var(--navy); font-weight: 600; }
.status-light { width: 8px; height: 8px; border-radius: 50%; background: #56c59b; box-shadow: 0 0 0 4px rgba(86,197,155,.12); }
.stage-canvas { position: relative; height: 558px; }
.stage-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-lines path { fill: none; stroke: #c7d1d5; stroke-width: 1.2; stroke-dasharray: 4 6; animation: dash 16s linear infinite; }
.flow-node { position: absolute; width: 152px; min-height: 62px; padding: 11px 12px; display: flex; gap: 10px; align-items: center; border: 1px solid #dbe1e3; border-radius: 13px; background: rgba(255,255,255,.95); box-shadow: 0 10px 24px rgba(23,35,62,.07); }
.flow-node .node-icon { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #eef5f5; color: var(--navy); font-size: 10px; font-weight: 700; }
.flow-node div { min-width: 0; }
.flow-node small, .flow-node strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-node small { color: #8892a0; font-size: 9px; }
.flow-node strong { color: var(--navy); font-size: 11px; font-weight: 600; }
.flow-node i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px white, 0 0 0 5px #cddadd; }
.node-input i { right: -4px; }.node-output i { left: -4px; }
.input-one { left: 18px; top: 61px; }.input-two { left: 18px; top: 225px; }.input-three { left: 18px; top: 386px; }
.output-one { right: 18px; top: 70px; }.output-two { right: 18px; top: 225px; }.output-three { right: 18px; top: 385px; }
.output-two .node-icon { background: #fff1e5; color: #a45d26; }
.brain-node { position: absolute; left: 50%; top: 178px; transform: translateX(-50%); width: 184px; height: 188px; padding: 21px; border-radius: 23px; background: linear-gradient(150deg, var(--navy) 0%, #17213f 100%); color: white; box-shadow: 0 30px 50px rgba(25,36,70,.28); text-align: center; }
.brain-mark { width: 48px; height: 48px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 13px; background: white; }
.brain-mark img { width: 38px; }
.brain-node > small { display: block; color: #8eb9c4; font-size: 7px; letter-spacing: .16em; }
.brain-node > strong { display: block; margin-top: 5px; font-family: "Manrope"; font-size: 13px; }
.brain-pulse { margin: 11px 0; display: flex; justify-content: center; gap: 5px; }
.brain-pulse span { width: 22px; height: 3px; border-radius: 3px; background: var(--teal); animation: bars 1.4s ease-in-out infinite; }
.brain-pulse span:nth-child(2) { animation-delay: .2s; }.brain-pulse span:nth-child(3) { animation-delay: .4s; }
.brain-rule { padding: 8px 9px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.05); color: #c7d1df; font-size: 8px; }
.brain-rule b { color: #6de0b3; }
.stage-caption { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: calc(100% - 36px); padding: 14px 18px; border-radius: 12px; background: #f4f7f7; display: flex; justify-content: space-between; align-items: center; color: var(--navy); font-size: 11px; }
.stage-caption em { color: #87919f; font-size: 9px; font-style: normal; text-transform: uppercase; letter-spacing: .12em; }
.capability-rail { position: relative; margin-top: 50px; padding: 19px 26px; display: flex; justify-content: center; align-items: center; gap: 28px; border-top: 1px solid rgba(32,44,85,.09); color: #77818f; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.capability-rail i { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }

.problem-section { padding: 145px 0; background: var(--white); }
.section-kicker { display: inline-block; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.section-kicker.light { color: #7ac5cf; }
.problem-grid { display: grid; grid-template-columns: 250px 1fr; }
.problem-copy h2 { max-width: 900px; margin-bottom: 28px; font-size: clamp(42px, 5vw, 68px); line-height: 1.05; font-weight: 500; }
.problem-copy h2 span { color: #99a4ac; }
.problem-copy > p { max-width: 680px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.handoff-map { grid-column: 1 / -1; margin-top: 82px; padding: 34px; border: 1px solid #e2e7e8; border-radius: 24px; background: #fafbfb; }
.handoff-label { margin-bottom: 20px; color: #99a2ae; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.broken-flow { display: grid; grid-template-columns: 1fr 70px 1fr 70px 1fr 70px 1fr; align-items: center; }
.broken-node { min-height: 106px; padding: 20px; border: 1px solid #dde3e4; border-radius: 15px; background: white; }
.broken-node b { color: #acb5bf; font-size: 9px; }.broken-node span, .broken-node small { display: block; }.broken-node span { margin: 14px 0 3px; color: var(--navy); font-weight: 600; }.broken-node small { color: #8c96a4; }
.broken-gap { position: relative; text-align: center; color: #a3acb6; font-size: 9px; text-transform: uppercase; }
.broken-gap::before, .broken-gap::after { content: ""; position: absolute; top: 50%; width: 14px; border-top: 1px dashed #c8cfd2; }.broken-gap::before { left: 7px; }.broken-gap::after { right: 7px; }
.connected-label { margin-top: 38px; }
.connected-flow { position: relative; height: 92px; padding: 0 6%; display: flex; justify-content: space-between; align-items: center; overflow: hidden; border-radius: 15px; background: var(--navy); color: white; }
.connected-flow span { position: relative; z-index: 2; padding: 8px 12px; background: var(--navy); font-size: 13px; font-weight: 600; }
.connected-flow span:nth-child(2) { color: var(--teal-bright); font-family: "Manrope"; font-size: 17px; }
.flow-beam { position: absolute; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--teal), transparent); }
.flow-beam::after { content: ""; position: absolute; width: 110px; height: 1px; background: white; box-shadow: 0 0 14px white; animation: beam 3s linear infinite; }

.solutions-section { padding: 140px 0; background: #eef2f1; }
.section-heading { margin-bottom: 72px; display: grid; grid-template-columns: 1fr 390px; align-items: end; gap: 60px; }
.section-heading h2, .integrations-heading h2 { margin: 14px 0 0; font-size: clamp(42px, 5vw, 66px); line-height: 1.08; font-weight: 500; }
.section-heading > p, .integrations-heading > p { margin-bottom: 6px; color: var(--muted); font-size: 17px; line-height: 1.68; }
.solution-feature { min-height: 640px; padding: 68px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 65px; align-items: center; border-radius: var(--radius-lg); background: white; box-shadow: 0 16px 60px rgba(30,45,62,.07); overflow: hidden; }
.solution-number { display: block; margin-bottom: 25px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.solution-copy h3 { margin-bottom: 20px; color: var(--navy); font-size: clamp(36px, 4vw, 55px); line-height: 1.08; font-weight: 500; }
.solution-copy > p { color: var(--muted); font-size: 16px; line-height: 1.7; }
.tag-list { padding: 0; margin: 30px 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tag-list li { padding: 8px 11px; border: 1px solid #dde3e4; border-radius: 99px; color: #657182; font-size: 11px; }
.channel-row { display: flex; align-items: center; gap: 15px; }
.channel-row img { width: 20px; height: 20px; }.channel-row span { color: #8a94a0; font-size: 11px; }
.conversation-ui { position: relative; min-height: 514px; }
.phone-shell { position: absolute; z-index: 2; left: 12px; top: 0; width: 375px; min-height: 510px; padding: 0 20px 22px; border: 1px solid #d9e1e2; border-radius: 26px; background: #f5f8f7; box-shadow: 0 30px 60px rgba(28,47,63,.16); }
.phone-header { height: 72px; margin: 0 -20px 21px; padding: 0 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e0e7e8; background: white; border-radius: 26px 26px 0 0; }
.avatar-mark { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; background: #eff4f3; }.avatar-mark img { width: 30px; }
.phone-header div { flex: 1; }.phone-header strong, .phone-header small { display: block; }.phone-header strong { color: var(--navy); font-size: 12px; }.phone-header small { color: #7c8792; font-size: 9px; }.phone-header small i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #49bf91; }.phone-header b { color: #a0a9b3; letter-spacing: 2px; }
.message { width: fit-content; max-width: 85%; margin: 11px 0; padding: 11px 13px; border-radius: 12px; font-size: 11px; line-height: 1.5; }
.message.customer { margin-left: auto; border-radius: 12px 12px 2px 12px; background: var(--navy); color: white; }
.message.assistant { border-radius: 12px 12px 12px 2px; background: white; color: #4e5b6a; box-shadow: 0 5px 18px rgba(31,47,70,.06); }
.product-bubble { margin: 12px 0; padding: 10px; display: flex; align-items: center; gap: 11px; border: 1px solid #dce4e4; border-radius: 12px; background: white; }
.product-art { width: 58px; height: 66px; border-radius: 8px; background: #d9e7e8; display: grid; place-items: center; overflow: hidden; }
.product-art span { width: 34px; height: 47px; border-radius: 11px 11px 5px 5px; background: var(--navy); clip-path: polygon(19% 0, 39% 8%, 60% 8%, 80% 0, 100% 20%, 84% 35%, 78% 100%, 22% 100%, 16% 35%, 0 20%); }
.product-bubble > div:nth-child(2) { flex: 1; }.product-bubble small, .product-bubble strong, .product-bubble em { display: block; }.product-bubble small { color: var(--teal); font-size: 7px; letter-spacing: .1em; }.product-bubble strong { color: var(--navy); font-size: 12px; }.product-bubble em { color: #8a94a0; font-size: 9px; font-style: normal; }.product-bubble b { color: var(--teal); }
.message.compact { font-size: 10px; }.typing { padding: 6px 10px; display: flex; gap: 3px; }.typing span { width: 4px; height: 4px; border-radius: 50%; background: #a3adb6; animation: typing 1.2s infinite; }.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
.context-panel { position: absolute; right: -10px; top: 74px; width: 210px; padding: 20px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: var(--navy); color: white; box-shadow: 0 22px 48px rgba(23,35,62,.28); }
.context-panel > span { color: #7ac5cf; font-size: 8px; font-weight: 700; letter-spacing: .15em; }.context-panel > div:not(.confidence) { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.09); }.context-panel small,.context-panel strong { display: block; }.context-panel small { color: #8590a7; font-size: 8px; }.context-panel strong { margin-top: 3px; font-size: 11px; font-weight: 500; }
.confidence { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; color: #a6b0c2; font-size: 9px; }.confidence b { padding: 3px 7px; border-radius: 99px; background: rgba(89,210,173,.12); color: #69d2af; font-size: 8px; }

.solutions-duo { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.solution-panel { min-height: 620px; padding: 52px; border-radius: 30px; background: white; overflow: hidden; }
.solution-panel .solution-copy h3 { font-size: clamp(34px, 3vw, 46px); }.solution-panel .solution-copy > p { max-width: 480px; }
.case-stack { margin-top: 45px; padding: 9px; border-radius: 20px; background: #f1f5f4; }
.case-row { margin-bottom: 7px; padding: 15px; display: flex; align-items: center; gap: 12px; border: 1px solid #e5e9e9; border-radius: 13px; background: white; }
.case-row.active { border-color: rgba(237,156,92,.42); box-shadow: 0 8px 22px rgba(119,78,42,.08); }.case-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #edf4f4; color: var(--teal); font-weight: 700; }.case-row div { flex: 1; }.case-row strong,.case-row small { display: block; }.case-row strong { color: var(--navy); font-size: 12px; }.case-row small { color: #89939f; font-size: 9px; }.status { padding: 4px 7px; border-radius: 99px; background: #edf4f4; color: #62747c; font-size: 8px; }.status.success { background: #e9f7f0; color: #358c6b; }.status.warn { background: #fff1e4; color: #ae652a; }
.team-alert { padding: 14px; display: flex; justify-content: space-between; align-items: center; color: #687585; font-size: 10px; }.team-alert div { display: flex; }.team-alert i { width: 27px; height: 27px; margin-left: -5px; border: 2px solid #f1f5f4; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: white; font-size: 7px; font-style: normal; }
.booking-panel { background: #dcecee; }.calendar-ui { max-width: 440px; margin: 45px auto 0; padding: 24px; border-radius: 22px; background: white; box-shadow: 0 22px 48px rgba(31,53,69,.12); }.cal-top { padding-bottom: 18px; display: flex; justify-content: space-between; border-bottom: 1px solid #e7ebec; color: var(--navy); font-size: 12px; font-weight: 600; }.cal-top div { color: #9aa3ad; }.cal-grid { padding: 18px 4px; display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; text-align: center; }.cal-grid b { color: #9aa3ad; font-size: 8px; }.cal-grid span { width: 34px; height: 34px; margin: auto; display: grid; place-items: center; border-radius: 10px; color: #657182; font-size: 10px; }.cal-grid span.selected { background: var(--navy); color: white; box-shadow: 0 8px 20px rgba(32,44,85,.25); }
.booking-confirm { margin-top: 4px; padding: 15px; display: flex; gap: 12px; align-items: center; border-radius: 13px; background: #f1f7f6; }.booking-confirm > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: white; }.booking-confirm small,.booking-confirm strong,.booking-confirm em { display: block; }.booking-confirm small { color: var(--teal); font-size: 7px; letter-spacing: .12em; }.booking-confirm strong { color: var(--navy); font-size: 11px; }.booking-confirm em { color: #929ba5; font-size: 8px; font-style: normal; }
.ops-ribbon { margin-top: 22px; padding: 58px 62px; border-radius: 30px; background: #f8f9f9; }
.ribbon-copy { display: flex; justify-content: space-between; gap: 40px; align-items: end; }.ribbon-copy h3 { max-width: 650px; margin: 0; color: var(--navy); font-size: clamp(34px, 4vw, 52px); line-height: 1.1; font-weight: 500; }
.ops-flow { position: relative; margin: 52px 0 34px; display: grid; grid-template-columns: repeat(7, auto); align-items: center; }.ops-flow > div { min-height: 130px; padding: 20px; border: 1px solid #dfe5e5; border-radius: 16px; background: white; }.ops-flow > i { color: #9aa4ae; font-style: normal; text-align: center; }.ops-flow span { width: 32px; height: 32px; margin-bottom: 20px; display: grid; place-items: center; border-radius: 9px; background: #eaf4f3; color: var(--teal); font-size: 9px; font-weight: 700; }.ops-flow strong,.ops-flow small { display: block; }.ops-flow strong { color: var(--navy); font-size: 12px; }.ops-flow small { color: #919aa5; font-size: 9px; }
.ribbon-list { padding: 22px 0 0; margin: 0; display: flex; justify-content: space-between; border-top: 1px solid #dde3e4; list-style: none; color: #657182; font-size: 11px; }.ribbon-list li::before { content: "•"; margin-right: 8px; color: var(--teal); }
.control-feature { margin-top: 22px; padding: 75px; display: grid; grid-template-columns: 1fr .9fr; gap: 90px; align-items: center; border-radius: 34px; background: var(--navy-deep); overflow: hidden; }
.solution-number.light { color: #77c6d0; }.control-copy h3 { color: white; font-size: clamp(42px, 4vw, 58px); line-height: 1.08; font-weight: 500; }.control-copy h3 span { color: #7b8aa8; }.control-copy > p { max-width: 520px; color: #9ba7bd; font-size: 16px; }
.control-points { margin-top: 42px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }.control-points > div { display: flex; gap: 12px; }.control-points > div > b { color: #618091; font-size: 9px; }.control-points span strong,.control-points span small { display: block; }.control-points span strong { color: #e8edf2; font-size: 12px; }.control-points span small { margin-top: 3px; color: #77869f; font-size: 9px; line-height: 1.5; }
.control-console { border: 1px solid rgba(255,255,255,.11); border-radius: 21px; background: #172340; box-shadow: 0 30px 70px rgba(0,0,0,.25); overflow: hidden; transform: rotate(1deg); }.console-head { height: 60px; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); color: #dce3ec; font-size: 10px; }.console-head span { display: flex; align-items: center; gap: 9px; }.console-head i { width: 7px; height: 7px; border-radius: 50%; background: #5ed1a5; }.console-head b { padding: 4px 8px; border-radius: 99px; background: rgba(94,209,165,.1); color: #6ad7af; font-size: 8px; }.console-body { padding: 14px; }.policy-row { padding: 14px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.07); }.policy-row small,.policy-row strong { display: block; }.policy-row small { color: #72809a; font-size: 7px; letter-spacing: .1em; }.policy-row strong { color: #e1e6ed; font-size: 10px; font-weight: 500; }.toggle { position: relative; width: 31px; height: 17px; border-radius: 99px; background: #34415d; }.toggle::after { content:""; position:absolute; width:13px; height:13px; left:2px; top:2px; border-radius:50%; background:white; transition:.2s; }.toggle.on { background: var(--teal); }.toggle.on::after { left:16px; }.audit-event { margin-top: 15px; padding: 16px; border: 1px solid rgba(237,156,92,.2); border-radius: 13px; background: rgba(237,156,92,.06); }.audit-event > div { display: flex; gap: 8px; color: #9b8290; font-size: 7px; }.audit-event p { margin: 8px 0 13px; color: #e9e5e7; font-size: 11px; }.audit-event button { width: 100%; padding: 9px 10px; display: flex; justify-content: space-between; border: 0; border-radius: 8px; background: #2b3855; color: #b9c5d7; font-size: 9px; }

.integrations-section { padding: 150px 0 130px; background: white; overflow: hidden; }
.integrations-heading { margin-bottom: 70px; text-align: center; }.integrations-heading h2 span { color: #9aa5ad; }.integrations-heading > p { max-width: 720px; margin: 26px auto 0; }
.logo-marquee { width: 100%; margin: 15px 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }.logo-track { width: max-content; display: flex; gap: 15px; animation: marquee 45s linear infinite; }.logo-marquee.reverse .logo-track { animation-direction: reverse; animation-duration: 52s; }.logo-marquee:hover .logo-track { animation-play-state: paused; }.logo-chip { min-width: 175px; height: 76px; padding: 0 24px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #e2e7e8; border-radius: 17px; background: #fafbfb; color: #404d60; font-weight: 600; }.logo-chip img { width: 24px; height: 24px; }.logo-chip span { font-size: 13px; }.logo-chip.custom-api > span { width: 30px; height: 30px; display: grid; place-items:center; border-radius:8px; background:var(--navy); color:white; font-size:10px; }.logo-chip.custom-api b { font-size: 13px; }

.stories-section { padding: 145px 0; background: #eff2f1; }
.stories-heading > p { padding-left: 28px; border-left: 1px solid #cbd3d4; }.story-tabs { margin-bottom: 20px; display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid #cfd7d8; }.story-tab { position: relative; padding: 18px 10px 22px; border: 0; background: transparent; color: #7a8593; text-align: left; font-weight: 600; cursor: pointer; transition: color .25s; }.story-tab span { margin-right: 13px; color: #acb4bd; font-size: 9px; }.story-tab::after { content:""; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--teal); transform:scaleX(0); transition:transform .25s; }.story-tab.active { color:var(--navy); }.story-tab.active::after { transform:scaleX(1); }
.story-panel { display: grid; grid-template-columns: .85fr 1.15fr; min-height: 670px; border-radius: 30px; background: white; overflow: hidden; box-shadow: 0 20px 60px rgba(30,45,62,.08); }.story-content { padding: 58px; }.story-meta { display:flex; justify-content:space-between; color:#929ca7; font-size:8px; letter-spacing:.12em; }.story-meta b { color:var(--teal); }.story-content > h3 { margin: 80px 0 52px; color:var(--navy); font-size:clamp(36px,3.6vw,51px); line-height:1.08; font-weight:500; }.story-columns { display:grid; grid-template-columns:1fr; gap:23px; }.story-columns > div { padding-top:18px; display:grid; grid-template-columns:130px 1fr; gap:20px; border-top:1px solid #e3e7e8; }.story-columns small { color:#a2aab4; font-size:8px; letter-spacing:.1em; }.story-columns p { margin:0; color:#606d7d; font-size:12px; line-height:1.65; }.story-columns ul { padding:0; margin:0; display:flex; flex-wrap:wrap; gap:7px; list-style:none; }.story-columns li { padding:5px 8px; border-radius:99px; background:#eff5f4; color:#566b72; font-size:9px; }
.story-visual { position:relative; margin:22px 22px 22px 0; border-radius:22px; background:var(--navy-deep); color:white; overflow:hidden; transition:opacity .2s, transform .25s; }.story-visual.changing { opacity:.3; transform:scale(.985); }.visual-top { height:60px; padding:0 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.08); color:#8795ac; font-size:9px; }.visual-top b { display:flex; align-items:center; gap:7px; color:#69d3ae; font-size:8px; }.visual-top i { width:6px; height:6px; border-radius:50%; background:#69d3ae; }.visual-workspace { min-height:474px; padding:34px 26px; display:grid; grid-template-columns:1fr .8fr 1fr; gap:19px; align-items:center; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:32px 32px; }.source-column>small,.outcome-column>small { display:block; margin-bottom:15px; color:#64738e; font-size:7px; letter-spacing:.15em; }.mini-source { margin:8px 0; padding:11px; display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:#17233f; }.mini-source>span { width:27px; height:27px; display:grid; place-items:center; border-radius:7px; background:#223253; color:#76cbd2; font-size:7px; font-weight:700; }.mini-source b { color:#d4dbe5; font-size:8px; font-weight:500; }.mini-source i { color:#61708a; font-size:7px; font-style:normal; }.visual-engine { position:relative; padding:21px 13px; border:1px solid rgba(95,206,209,.25); border-radius:17px; background:linear-gradient(150deg,#24355a,#1a2747); text-align:center; box-shadow:0 0 50px rgba(70,178,189,.12); }.visual-engine::before,.visual-engine::after { content:""; position:absolute; top:50%; width:20px; border-top:1px dashed #4d6783; }.visual-engine::before { left:-20px; }.visual-engine::after { right:-20px; }.visual-engine img { width:46px; margin:0 auto 12px; filter:drop-shadow(0 10px 16px rgba(0,0,0,.3)); }.visual-engine small { display:block; color:#66bdc8; font-size:6px; letter-spacing:.13em; }.visual-engine strong { display:block; margin-top:8px; color:#eef2f6; font-size:11px; line-height:1.4; }.visual-engine div { margin-top:14px; display:flex; justify-content:center; gap:4px; }.visual-engine div span { padding:3px 5px; border-radius:4px; background:rgba(255,255,255,.06); color:#8290a9; font-size:5px; }.outcome-column>div { margin:8px 0; padding:14px 12px; display:flex; justify-content:space-between; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:#17233f; }.outcome-column b { color:#d5dce6; font-size:8px; font-weight:500; }.outcome-column span { color:#65d0a7; font-size:9px; }.visual-footer { height:70px; padding:0 24px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.08); color:#72809a; font-size:8px; }.visual-footer div { display:flex; gap:7px; }.visual-footer b { padding:6px 8px; border-radius:6px; background:#1d2a48; color:#99a5b7; font-size:7px; font-weight:500; }

.process-section { padding: 150px 0; background: var(--navy-deep); color:white; }.process-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:110px; align-items:start; }.process-intro { position:sticky; top:130px; }.process-intro h2 { margin:18px 0 28px; font-size:clamp(44px,4.7vw,64px); line-height:1.08; font-weight:500; }.process-intro h2 span { color:#72809c; }.process-intro p { max-width:470px; margin-bottom:34px; color:#909db4; font-size:16px; line-height:1.7; }.process-step { min-height:220px; padding:36px 0; display:grid; grid-template-columns:45px 1fr 120px; gap:25px; border-top:1px solid rgba(255,255,255,.1); }.process-step:last-child { border-bottom:1px solid rgba(255,255,255,.1); }.process-step>b { color:#5d6d89; font-size:10px; }.process-step small { color:#75c7d1; font-size:8px; letter-spacing:.16em; }.process-step h3 { margin:12px 0 12px; color:#f2f5f7; font-size:29px; font-weight:500; }.process-step p { max-width:490px; margin:0; color:#8290a7; font-size:13px; line-height:1.65; }.process-step>span { align-self:end; color:#63708a; font-size:8px; letter-spacing:.1em; text-transform:uppercase; }

.contact-section { padding:120px 0; background:#dcecee; }.contact-shell { padding:75px; display:grid; grid-template-columns:1fr .9fr; gap:90px; border-radius:34px; background:white; box-shadow:0 24px 80px rgba(36,60,72,.1); }.contact-copy h2 { margin:18px 0 25px; color:var(--navy); font-size:clamp(43px,4.7vw,64px); line-height:1.07; font-weight:500; }.contact-copy h2 span { color:var(--teal); }.contact-copy>p { max-width:520px; color:#667383; font-size:16px; line-height:1.7; }.contact-copy>a { display:inline-flex; gap:12px; margin-top:16px; color:var(--navy); font-size:18px; font-weight:600; border-bottom:1px solid #c9d2d4; }.contact-note { margin-top:75px; padding-top:20px; display:flex; gap:16px; border-top:1px solid #e1e6e7; }.contact-note>span { color:var(--teal); font-size:9px; }.contact-note p { margin:0; color:var(--navy); font-size:12px; font-weight:600; }.contact-note small { color:#8b95a1; font-weight:400; }.contact-form { padding:34px; border-radius:22px; background:#f4f7f7; }.honeypot { display:none; }.contact-form label { display:block; margin-bottom:17px; }.contact-form label>span { display:block; margin-bottom:7px; color:#657182; font-size:10px; font-weight:600; }.contact-form input,.contact-form textarea { width:100%; padding:13px 14px; border:1px solid #dbe2e3; border-radius:10px; outline:none; background:white; color:var(--navy); font-size:12px; transition:border .2s,box-shadow .2s; }.contact-form input:focus,.contact-form textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(67,167,185,.12); }.contact-form textarea { resize:vertical; min-height:110px; }.field-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.form-button { width:100%; margin-top:4px; }.form-privacy { display:block; margin-top:12px; color:#96a0aa; font-size:8px; text-align:center; }

.site-footer { padding:80px 0 25px; background:#0c142b; color:white; }.footer-top { padding-bottom:80px; display:grid; grid-template-columns:1fr 1fr; }.footer-brand img { width:155px; filter:brightness(0) invert(1); }.footer-top>div>p { margin-top:25px; color:#78859e; font-family:"Manrope"; font-size:22px; line-height:1.4; }.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:60px; }.footer-links>div { display:flex; flex-direction:column; align-items:flex-start; gap:11px; }.footer-links small { margin-bottom:10px; color:#53617a; font-size:8px; letter-spacing:.15em; }.footer-links a { color:#aab4c5; font-size:13px; transition:color .2s; }.footer-links a:hover { color:white; }.footer-bottom { padding-top:22px; display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.08); color:#5f6b82; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }.footer-bottom a { color:#8793a8; }

.thanks-page { min-height:100vh; padding:45px; background:linear-gradient(145deg,#f7f9f9,#dcecee); }.thanks-page main { width:min(100%,1100px); margin:auto; }.thanks-page .brand img { width:145px; }.thanks-card { max-width:800px; margin:13vh auto 0; padding:70px; border-radius:34px; background:white; box-shadow:var(--shadow); text-align:center; }.thanks-card h1 { margin:25px 0; color:var(--navy); font-size:clamp(56px,8vw,95px); line-height:1; font-weight:500; }.thanks-card h1 span { color:var(--teal); }.thanks-card p { max-width:520px; margin:0 auto 32px; color:var(--muted); font-size:17px; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.65,.25,1); }.reveal.visible { opacity:1; transform:none; }.reveal-delay { transition-delay:.16s; }
@keyframes pulse-ring { 0%{transform:scale(.7);opacity:1}70%,100%{transform:scale(1.5);opacity:0} }
@keyframes dash { to{stroke-dashoffset:-100} }
@keyframes bars { 0%,100%{opacity:.25;transform:scaleX(.7)}50%{opacity:1;transform:scaleX(1)} }
@keyframes beam { from{left:-110px}to{left:100%} }
@keyframes typing { 0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)} }
@keyframes marquee { to{transform:translateX(-50%)} }

@media (max-width: 1100px) {
  .nav-shell { grid-template-columns:170px 1fr 170px; }.desktop-nav { gap:18px; }.desktop-nav a { font-size:12px; }
  .hero-grid { grid-template-columns:1fr; }.hero { padding-top:150px; }.hero-copy { max-width:760px; }.hero h1 { font-size:86px; }.system-stage { transform:none; max-width:800px; width:100%; margin:0 auto; }.capability-rail { margin-top:35px; }
  .problem-grid { grid-template-columns:180px 1fr; }.solution-feature { padding:50px; gap:35px; }.conversation-ui { transform:scale(.88); transform-origin:center; }.solution-panel { padding:40px; }
  .control-feature { padding:55px; gap:45px; }.story-panel { grid-template-columns:1fr; }.story-visual { min-height:600px; margin:0 22px 22px; }.story-content>h3 { margin:45px 0 38px; }.process-grid { gap:60px; }.contact-shell { padding:55px; gap:50px; }
}

@media (max-width: 820px) {
  .container { width:min(calc(100% - 32px),var(--container)); }.site-header { padding:10px; }.nav-shell { height:62px; padding:0 10px 0 16px; display:flex; justify-content:space-between; border-radius:16px; }.desktop-nav,.desktop-cta { display:none; }.brand img { width:125px; }.menu-toggle { width:42px; height:42px; border:0; border-radius:10px; background:var(--navy); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }.menu-toggle span { width:17px; height:1px; background:white; transition:.25s; }.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.5px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }.mobile-panel { position:absolute; top:80px; left:10px; right:10px; padding:20px; border:1px solid #dce2e4; border-radius:16px; background:rgba(250,252,252,.98); box-shadow:0 24px 50px rgba(22,36,64,.15); display:flex; flex-direction:column; gap:5px; opacity:0; transform:translateY(-10px); visibility:hidden; transition:.25s; }.mobile-panel.open { opacity:1; transform:none; visibility:visible; }.mobile-panel>a:not(.button) { padding:12px; color:var(--navy); font-weight:600; }.mobile-panel .button { margin-top:8px; }
  .hero { min-height:0; padding:132px 0 35px; }.hero-grid { gap:55px; }.hero h1 { font-size:clamp(54px,14vw,76px); }.hero-lead { font-size:17px; }.system-stage { min-height:530px; }.stage-canvas { height:468px; }.input-three,.output-three { top:345px; }.input-two,.output-two { top:205px; }.input-one,.output-one { top:55px; }.brain-node { top:145px; transform:translateX(-50%) scale(.9); }.stage-caption { display:none; }.capability-rail { overflow-x:auto; justify-content:flex-start; white-space:nowrap; }
  .problem-section,.solutions-section,.integrations-section,.stories-section,.process-section { padding:100px 0; }.problem-grid { display:block; }.problem-copy { margin-top:25px; }.problem-copy h2 { font-size:48px; }.handoff-map { margin-top:50px; padding:25px; }.broken-flow { grid-template-columns:1fr; gap:8px; }.broken-gap { height:23px; }.broken-gap::before,.broken-gap::after { display:none; }.broken-gap span::before,.broken-gap span::after { content:"↓"; margin:0 8px; }.connected-flow { padding:0 20px; }.connected-flow span { font-size:10px; }.connected-flow span:nth-child(2) { font-size:12px; }
  .section-heading { grid-template-columns:1fr; gap:25px; margin-bottom:50px; }.solution-feature { padding:42px 32px; grid-template-columns:1fr; }.conversation-feature { min-height:1070px; }.conversation-ui { transform:none; }.phone-shell { left:0; }.context-panel { right:0; }.solutions-duo { grid-template-columns:1fr; }.solution-panel { min-height:auto; }.ops-ribbon { padding:42px 32px; }.ribbon-copy { display:block; }.ops-flow { grid-template-columns:1fr; gap:8px; }.ops-flow>i { transform:rotate(90deg); }.ops-flow>div { min-height:110px; }.ribbon-list { flex-wrap:wrap; gap:12px 25px; }.control-feature { padding:50px 35px; grid-template-columns:1fr; }.control-console { max-width:530px; width:100%; }.story-tabs { grid-template-columns:1fr 1fr; border:0; gap:7px; }.story-tab { padding:13px; border:1px solid #d6ddde; border-radius:10px; }.story-tab::after { display:none; }.story-tab.active { background:white; border-color:var(--teal); }.story-content { padding:42px; }.story-visual { min-height:560px; }.process-grid { grid-template-columns:1fr; }.process-intro { position:static; }.process-step { grid-template-columns:35px 1fr; }.process-step>span { display:none; }.contact-shell { padding:45px 35px; grid-template-columns:1fr; }.contact-note { margin-top:40px; }.footer-top { grid-template-columns:1fr; gap:50px; }
}

@media (max-width: 560px) {
  .container { width:min(calc(100% - 24px),var(--container)); }.hero h1 { font-size:52px; }.hero-actions { align-items:stretch; flex-direction:column; gap:18px; }.hero-actions .button { width:100%; }.hero-proof { margin-top:35px; }.system-stage { min-height:470px; border-radius:21px; }.stage-canvas { height:408px; }.flow-node { width:120px; padding:8px; }.flow-node .node-icon { flex-basis:25px; width:25px; height:25px; }.flow-node small { display:none; }.flow-node strong { font-size:9px; }.input-one,.input-two,.input-three { left:10px; }.output-one,.output-two,.output-three { right:10px; }.input-one,.output-one { top:42px; }.input-two,.output-two { top:181px; }.input-three,.output-three { top:319px; }.brain-node { top:121px; width:145px; padding:15px; transform:translateX(-50%) scale(.8); }.stage-lines { display:none; }.problem-copy h2,.section-heading h2,.integrations-heading h2 { font-size:38px; }.problem-copy>p { font-size:16px; }.handoff-map { padding:16px; }.connected-flow { height:auto; padding:18px; flex-direction:column; gap:14px; }.flow-beam { top:50%; transform:rotate(90deg); }.solution-feature,.solution-panel,.control-feature,.ops-ribbon { border-radius:23px; }.solution-feature { padding:34px 22px; }.solution-copy h3,.solution-panel .solution-copy h3 { font-size:35px; }.conversation-feature { min-height:980px; }.conversation-ui { min-height:500px; transform:scale(.81); transform-origin:top left; width:123%; }.phone-shell { width:350px; }.context-panel { right:-4px; top:310px; }.solution-panel { padding:34px 24px; }.control-feature { padding:40px 24px; }.control-copy h3 { font-size:37px; }.control-points { grid-template-columns:1fr; }.ribbon-list { display:grid; }.logo-chip { min-width:155px; height:66px; }.stories-heading>p { padding-left:0; border:0; }.story-tabs { grid-template-columns:1fr; }.story-content { padding:32px 24px; }.story-content>h3 { font-size:34px; }.story-columns>div { grid-template-columns:1fr; gap:7px; }.story-visual { min-height:620px; margin:0 10px 10px; }.visual-workspace { grid-template-columns:1fr; align-content:center; }.visual-engine { width:150px; margin:auto; }.visual-engine::before,.visual-engine::after { display:none; }.mini-source:nth-of-type(3),.outcome-column>div:nth-of-type(3) { display:none; }.visual-footer { display:none; }.process-step h3 { font-size:25px; }.contact-shell { padding:38px 22px; border-radius:24px; }.contact-copy h2 { font-size:39px; }.field-row { grid-template-columns:1fr; gap:0; }.contact-form { padding:24px 18px; }.footer-links { grid-template-columns:1fr; gap:35px; }.footer-bottom { align-items:flex-start; flex-direction:column; gap:10px; }.thanks-page { padding:20px; }.thanks-card { padding:45px 24px; }.thanks-card h1 { font-size:55px; }
}

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