:root {
  --blue:#075bff;
  --blue-dark:#0048da;
  --ink:#101827;
  --muted:#697386;
  --line:#e7edf5;
  --pale:#f5f8fd;
  --green:#13856f;
  --radius:16px;
  font-family:Onest,Arial,sans-serif;
  color:var(--ink);
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:#fff;
  font-size:14px;
  line-height:1.55
}

button,input,select {
  font:inherit
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent
}

button,a {
  touch-action:manipulation
}

a {
  color:inherit;
  text-decoration:none
}

button {
  cursor:pointer
}

svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

button {
  color:inherit
}

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #80acff;
  outline-offset:5px
}

input:focus,select:focus {
  outline:2px solid #80acff;
  outline-offset:2px
}

img {
  display:block;
  max-width:100%;
  height:auto
}

.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}

.container {
  max-width:1180px;
  width:calc(100% - 80px);
  margin-inline:auto
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--blue);
  padding:12px;
  color:white;
  z-index:100
}

.skip-link:focus {
  top:12px
}

.header {
  height:86px;
  background:rgba(255,255,255,.92);
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(231,237,245,.4);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:background .25s,box-shadow .25s,border-color .25s
}

.header.is-scrolled {
  background:rgba(255,255,255,.94);
  border-bottom-color:#e5edf9;
  box-shadow:0 5px 24px #173d7510
}

.header-inner {
  display:flex;
  align-items:center;
  gap:38px;
  height:100%
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:24px;
  font-weight:800;
  line-height:1;
  letter-spacing:-1px
}

.brand small {
  font-size:9px;
  display:block;
  margin-top:4px;
  letter-spacing:1.2px
}

.brand-bolt {
  width:30px;
  height:37px;
  stroke:none;
  fill:var(--blue);
  transform:rotate(9deg)
}

.navigation {
  display:flex;
  gap:25px;
  margin-right:auto;
  color:#515e73;
  font-size:12px;
  white-space:nowrap
}

.navigation a:hover,.footer a:hover {
  color:var(--blue)
}

.header-actions {
  display:flex;
  gap:10px;
  align-items:center
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  background:var(--blue);
  color:#fff;
  border:1px solid var(--blue);
  border-radius:9px;
  padding:15px 21px;
  font-weight:600;
  font-size:13px;
  line-height:1.3;
  box-shadow:0 5px 14px #075bff24;
  transition:background .2s,transform .2s,box-shadow .2s;
  white-space:nowrap
}

.button:hover {
  background:var(--blue-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 20px #075bff30
}

.button svg {
  width:18px;
  height:18px
}

.button-outline {
  color:#27344b;
  background:#fff;
  border-color:#b8c5da;
  box-shadow:0 2px 4px #172d5010
}

.button-outline:hover {
  background:#f3f7ff;
  border-color:var(--blue);
  color:var(--blue)
}

.button-small {
  padding:11px 17px;
  font-size:12px
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  padding:7px
}

.hero {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 84% 39%,#dbe8ff 0,rgba(238,245,255,.74) 26%,#fff 66%)
}

.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  align-items:center;
  min-height:605px;
  gap:12px;
  padding-top:30px;
  padding-bottom:50px
}

.hero-copy {
  position:relative;
  z-index:2;
  padding-right:26px
}

.eyebrow-pill {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#eef4ff;
  border:1px solid #e3edff;
  color:#445774;
  font-size:10px;
  font-weight:600;
  padding:5px 10px;
  border-radius:20px
}

.live-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:100%;
  background:var(--blue);
  box-shadow:0 0 0 3px #075bff0c;
  flex-shrink:0
}

h1,h2,h3,p {
  margin-top:0
}

h1 {
  font-size:64px;
  letter-spacing:-3.6px;
  line-height:1.04;
  font-weight:750;
  margin:24px 0 24px
}

h1 span,h2 span {
  color:var(--blue)
}

.hero-description {
  font-size:14px;
  color:#45536b;
  line-height:1.7;
  max-width:425px;
  margin-bottom:25px
}

.hero-buttons {
  display:flex;
  gap:12px
}

.microcopy {
  font-size:10px;
  color:#78859a;
  margin:11px 0 29px
}

.hero-benefits {
  display:flex;
  justify-content:space-between;
  max-width:415px;
  gap:14px
}

.hero-benefits>div {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  color:#44526a;
  line-height:1.45
}

.icon-bubble {
  width:37px;
  height:37px;
  border-radius:12px;
  background:white;
  display:grid;
  place-items:center;
  border:1px solid #e8eff9;
  box-shadow:0 5px 14px #3c76dd0a;
  color:#3e70da;
  flex-shrink:0
}

.icon-bubble svg {
  width:19px
}

.hero-visual {
  position:relative;
  min-width:0;
  padding-top:38px;
  margin-right:-38px
}

.product-window {
  --mini-height:440px;
  overflow-anchor:none;
  display:flex;
  background:#1c2534;
  border-radius:22px;
  border:6px solid #222d3e;
  box-shadow:0 30px 50px #183d7925,0 5px 9px #14284920;
  transform:perspective(1500px) rotateY(-7deg) rotateZ(1.5deg);
  height:var(--mini-height);
  overflow:hidden;
  position:relative;
  z-index:1
}

.product-sidebar {
  width:123px;
  flex-shrink:0;
  padding:22px 9px 18px;
  color:#bac3d3;
  font-size:8px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:linear-gradient(130deg,#232e40,#161e2c)
}

.product-brand {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:17px;
  color:white;
  font-weight:750;
  margin:0 0 12px 4px;
  letter-spacing:-.6px
}

.product-brand svg {
  fill:var(--blue);
  stroke:none;
  width:16px
}

.product-sidebar>button {
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 6px;
  width:100%;
  border:0;
  border-radius:5px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  transition:background .2s,color .2s
}

.product-sidebar>button:hover {
  background:#ffffff0c;
  color:white
}

.product-sidebar>button.sidebar-active {
  background:#ffffff16;
  color:white
}

.product-window [hidden] {
  display:none!important
}

.mini-content { width:100%; min-width:0; }
.mini-toolbar { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:24px; margin:0 0 10px; color:#607493; font-size:9px; }
.mini-muted { color:#93a2b8; font-size:8px; }
.mini-filters { display:flex; gap:4px; justify-content:flex-start; flex-wrap:wrap; }
.mini-filter { border:1px solid #e4ebf7; border-radius:5px; padding:5px 8px; background:white; color:#7b8ba5; font-size:8px; }
.mini-filter.active { color:#075bff; background:#edf4ff; border-color:#c8ddff; }
.mini-link { border:0; background:none; color:var(--blue); padding:3px 0; font-size:8px; }
.mini-link:disabled { color:#a0aec1; cursor:default; }
.mini-company-row,.mini-notice { display:flex; align-items:center; gap:9px; width:100%; background:#fff; border:1px solid #e8eff9; border-radius:8px; padding:12px 9px; margin-bottom:7px; text-align:left; transition:border-color .2s,background .2s; }
.mini-company-row:hover,.mini-notice:hover { border-color:#bcd5fd; background:#f5f9ff; }
.mini-company-main { display:block; flex:1; min-width:0; }
.mini-company-main strong { display:block; font-size:9px; font-weight:650; line-height:1.5; }
.mini-company-main small { display:block; color:#8a9bb3; font-size:8px; line-height:1.6; margin-top:3px; }
.mini-company-main em { display:block; font-style:normal; font-size:7px; color:#a3b0c3; margin-top:5px; }
.mini-company-arrow { color:#8aafe5; }
.mini-company-arrow svg { width:13px; height:13px; }
.mini-company-detail { padding:17px; border:1px solid #e7eef9; border-radius:9px; background:white; }
.mini-company-detail h4 { margin:12px 0 5px; font-size:12px; }
.mini-company-detail p { color:#8091aa; font-size:9px; line-height:1.7; margin:0 0 15px; }
.mini-detail-stats { display:grid; grid-template-columns:1fr 1fr; padding:13px 0; border-top:1px solid #edf2fa; border-bottom:1px solid #edf2fa; margin-bottom:13px; }
.mini-detail-stats strong { display:block; font-size:17px; font-weight:650; color:#234b88; }
.mini-detail-stats span { font-size:8px; color:#8a9bb4; }
.mini-primary { display:inline-flex; align-items:center; justify-content:center; gap:7px; color:white; background:var(--blue); border:0; border-radius:6px; padding:10px 13px; font-size:9px; }
.mini-primary svg { width:12px; height:12px; }
.mini-order-row { margin-bottom:8px; padding:15px 9px; }
.mini-status { flex-shrink:0; max-width:76px; border:0; border-radius:5px; padding:6px 7px; background:#edf2fa; color:#748bad; font-size:7px; }
.mini-status.work { background:#e7f0ff; color:#296dcf; }
.mini-status.proposal { background:#e4f8ee; color:#188164; }
.mini-help,.mini-empty { color:#97a5ba; font-size:8px; line-height:1.7; margin:12px 0 0; }
.mini-empty { padding:35px 10px; text-align:center; }
.mini-notice { padding:14px 9px; align-items:flex-start; }
.mini-notice-dot { width:5px; height:5px; border-radius:50%; background:var(--blue); margin-top:6px; flex-shrink:0; }
.mini-notice.read .mini-notice-dot { background:#d7e1f0; }
.mini-notice.read { background:#fafcff; }
.mini-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:11px; }
.mini-kpis>div { padding:11px 8px; background:white; border:1px solid #e8eff9; border-radius:7px; }
.mini-kpis strong { display:block; font-size:18px; color:#2d5592; letter-spacing:-.6px; line-height:1.3; }
.mini-kpis span { display:block; font-size:7px; color:#8c9db6; margin-top:3px; }
.mini-analytics-chart { background:white; border:1px solid #e8eff9; border-radius:8px; padding:12px 10px 6px; }
.mini-chart-caption { font-size:9px; font-weight:600; color:#506887; margin-bottom:12px; }
.mini-analysis-bars { display:flex; align-items:flex-end; gap:6px; height:115px; }
.mini-analysis-bar { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; }
.mini-analysis-bar i { width:100%; max-width:23px; min-height:4px; border-radius:4px 4px 1px 1px; background:linear-gradient(#619cff,#b8d7ff); }
.mini-analysis-bar small { font-size:7px; color:#98a9c1; }
.mini-analytics-summary { display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:7px; color:#8498b4; margin-top:12px; }
.mini-analytics-summary>span { display:flex; align-items:center; gap:4px; }
.mini-analytics-summary svg { color:#24a784; width:10px; height:10px; }

@media(max-width:700px) {
  .mini-toolbar { font-size:7px; min-height:19px; margin-bottom:7px; }
  .mini-muted,.mini-link,.mini-filter { font-size:6px; }
  .mini-filter { padding:4px 5px; }
  .mini-company-row,.mini-notice { padding:10px 6px; gap:6px; margin-bottom:5px; }
  .mini-company-row .order-icon,.mini-notice .order-icon { width:22px; height:22px; }
  .mini-company-row .order-icon svg,.mini-notice .order-icon svg { width:13px; height:13px; }
  .mini-company-main strong { font-size:7px; }
  .mini-company-main small { font-size:6px; }
  .mini-company-main em { font-size:5px; }
  .mini-order-row { padding:11px 5px; gap:5px; }
  .mini-status { font-size:6px; padding:5px; max-width:51px; }
  .mini-help { font-size:6px; }
  .mini-kpis { gap:5px; }
  .mini-kpis>div { padding:8px 6px; }
  .mini-kpis strong { font-size:15px; }
  .mini-kpis span { font-size:6px; }
  .mini-chart-caption { font-size:7px; margin-bottom:8px; }
  .mini-analysis-bars { height:87px; gap:4px; }
  .mini-analysis-bar small { font-size:5px; }
  .mini-analytics-summary { font-size:6px; margin-top:9px; }
  .mini-company-detail { padding:12px; }
  .mini-company-detail h4 { font-size:10px; }
  .mini-company-detail p { font-size:7px; margin-bottom:10px; }
  .mini-detail-stats { padding:10px 0; }
  .mini-detail-stats strong { font-size:14px; }
  .mini-detail-stats span { font-size:6px; }
  .mini-primary { font-size:7px; padding:8px 10px; }
}

@media(prefers-reduced-motion:no-preference) {
  .mini-content { animation:mini-enter .25s ease-out; }
}
@keyframes mini-enter {
  from { opacity:.4; translate:0 5px; }
  to { opacity:1; translate:0 0; }
}

.product-sidebar>button svg {
  width:12px;
  height:12px;
  color:#91a1ba
}

.sidebar-active {
  background:#ffffff16;
  border-radius:5px;
  color:white
}

.product-sidebar b {
  background:var(--blue);
  border-radius:3px;
  font-size:7px;
  margin-left:auto;
  padding:1px 3px
}

.sidebar-bottom {
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px
}

.sidebar-bottom>span:last-child {
  margin-left:auto
}

.avatar {
  width:22px;
  height:22px;
  background:#38445a;
  color:white;
  display:grid;
  place-items:center;
  border-radius:50%
}

.product-main {
  background:#fafcff;
  border-radius:15px;
  padding:18px 15px 12px;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  flex:1
}

.product-topline,.product-search,.product-tabs,.product-footer {
  flex-shrink:0
}

.product-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:13px;
  font-size:9px;
  font-weight:600;
  color:#516077
}

.product-topline>span:first-child {
  display:flex;
  align-items:center;
  gap:6px
}

.demo-badge {
  font-size:9px;
  color:#6c7c97;
  padding:3px 7px;
  border:1px solid #e1e8f4;
  border-radius:5px;
  background:#f7faff;
  font-weight:500
}

.product-search {
  display:flex;
  align-items:center;
  border:1px solid #e3eaf6;
  border-radius:7px;
  padding:4px;
  gap:5px;
  background:white;
  box-shadow:0 2px 4px #1a438208
}

.product-search>svg {
  width:13px;
  height:13px;
  margin-left:5px;
  color:#8092ae
}

.product-search input {
  min-width:0;
  flex:1;
  border:0;
  font-size:9px;
  background:none;
  padding:7px 2px;
  color:#253853
}

.product-search button {
  background:var(--blue);
  color:white;
  border:0;
  border-radius:5px;
  font-weight:600;
  font-size:9px;
  padding:10px 13px
}

.product-tabs {
  display:flex;
  gap:4px;
  margin:13px 0 10px
}

.product-tabs button {
  font-size:8px;
  color:#7f8ba0;
  background:none;
  border:1px solid transparent;
  border-radius:5px;
  padding:5px 7px;
  white-space:nowrap
}

.product-tabs button span {
  opacity:.6;
  margin-left:3px
}

.product-tabs button.active {
  border-color:#d6e3fa;
  background:#fff;
  color:#254879;
  font-weight:600;
  box-shadow:0 2px 4px #1c3f7710
}

.product-results {
  display:grid;
  gap:6px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#cadcf7 transparent;
  scrollbar-gutter:stable;
  align-content:start
}

.product-row {
  background:white;
  display:flex;
  gap:9px;
  align-items:center;
  padding:11px 8px;
  border:1px solid #eef2f8;
  border-radius:8px
}

.order-icon {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:8px;
  flex-shrink:0
}

.order-icon svg {
  width:19px;
  height:19px
}

.blue {
  background:#eaf1ff;
  color:#075bff
}

.orange {
  background:#fff0df;
  color:#f18b19
}

.purple {
  background:#f4eaff;
  color:#9756dc
}

.green {
  background:#e7f8f0;
  color:#20a778
}

.product-row .order-icon {
  width:28px;
  height:28px;
  border-radius:6px
}

.product-row .order-icon svg {
  width:16px;
  height:16px
}

.product-row-main {
  flex:1;
  min-width:0
}

.product-row h4 {
  font-size:9px;
  font-weight:650;
  line-height:1.5;
  margin:0 0 5px;
  max-width:220px
}

.row-meta {
  font-size:7px;
  color:#8a97ac;
  display:flex;
  gap:7px
}

.product-row-side {
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap
}

.product-row-side>b {
  font-size:9px;
  font-weight:650
}

.match-score {
  display:inline-flex;
  font-size:9px;
  line-height:1;
  background:#e5faf2;
  color:#178575;
  border-radius:5px;
  padding:5px 6px;
  font-weight:700;
  white-space:nowrap
}

.product-row-side .match-score {
  font-size:7px;
  padding:4px
}

.product-footer {
  display:flex;
  justify-content:space-between;
  font-size:7px;
  color:#95a2b5;
  margin:10px 0 1px;
  gap:8px
}

.product-footer span:first-child {
  display:flex;
  align-items:center;
  gap:3px
}

.product-footer svg {
  width:10px;
  height:10px;
  color:#35a889
}

.hand-note {
  font-family:Onest,Arial,sans-serif;
  font-weight:650;
  font-style:italic;
  font-size:12px;
  line-height:1.45;
  color:#3d5279;
  transform:rotate(-7deg)
}

.hero-note {
  position:absolute;
  top:-15px;
  left:200px
}

.hero-note svg {
  position:absolute;
  top:23px;
  left:70px;
  width:100px;
  height:50px;
  stroke:#83b0ff;
  stroke-width:1.4
}

.match-notification {
  position:absolute;
  bottom:-28px;
  left:160px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 17px;
  background:#fff;
  border:1px solid #e4ebf7;
  border-radius:12px;
  box-shadow:0 12px 26px #163b7616;
  z-index:2;
  transform:rotate(-2deg)
}

.match-icon {
  width:33px;
  height:33px;
  background:#edf3ff;
  border-radius:9px;
  color:var(--blue);
  display:grid;
  place-items:center
}

.match-icon svg {
  fill:var(--blue);
  stroke:none;
  width:18px
}

.match-notification b {
  display:block;
  font-size:11px;
  font-weight:650
}

.match-notification div>span {
  display:block;
  font-size:8px;
  color:#718199;
  margin-top:3px
}

.notification-dot {
  width:7px;
  height:7px;
  background:#36bf96;
  border-radius:50%;
  margin-left:10px
}

.visual-spark {
  position:absolute;
  color:var(--blue);
  z-index:3
}

.spark-one {
  top:14px;
  right:0;
  font-size:38px
}

.spark-two {
  left:-20px;
  bottom:22px;
  font-size:24px
}

.source-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #e8effa;
  border-bottom:1px solid #e8effa;
  padding-block:22px;
  color:#7c899e;
  font-size:12px;
  gap:18px
}

.source-strip>span {
  font-size:11px;
  line-height:1.6;
  min-width:140px
}

.source-strip>span b {
  font-weight:600;
  color:#4b5b73
}

.source-strip>div {
  display:flex;
  align-items:center;
  gap:10px;
  color:#697990;
  font-weight:500
}

.source-strip svg {
  width:22px;
  height:22px;
  color:#8299ba
}

.section {
  padding:75px 0 0
}

.section-heading {
  text-align:center;
  margin-bottom:34px
}

.eyebrow {
  font-size:10px;
  color:#8295c8;
  font-weight:600;
  letter-spacing:1.55px;
  display:block;
  margin-bottom:12px
}

h2 {
  font-size:36px;
  letter-spacing:-1.25px;
  line-height:1.2;
  font-weight:700;
  margin-bottom:14px
}

.section-heading p {
  color:#758198;
  font-size:13px;
  line-height:1.65;
  margin:0
}

.problem-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px
}

.problem-card {
  padding:25px 22px 20px;
  border:1px solid #edf1f8;
  background:linear-gradient(130deg,#f5f8fd,#fafcff);
  border-radius:var(--radius);
  transition:transform .2s,border-color .2s
}

.problem-card:hover {
  transform:translateY(-4px);
  border-color:#bfd4fa
}

.problem-card>svg {
  width:27px;
  height:27px;
  margin-bottom:16px;
  stroke-width:1.6
}

.problem-card h3 {
  font-size:16px;
  line-height:1.35;
  margin-bottom:10px;
  max-width:180px;
  letter-spacing:-.3px
}

.problem-card p {
  font-size:12px;
  color:#6b7890;
  line-height:1.7;
  margin-bottom:19px
}

.problem-card>span {
  display:flex;
  align-items:center;
  gap:8px;
  border-top:1px solid #e7edf7;
  padding-top:13px;
  font-size:9px;
  color:#4d6b9d;
  line-height:1.5
}

.problem-card>span svg {
  margin-left:auto;
  width:13px;
  height:13px
}

.solution {
  background:radial-gradient(ellipse 65% 50% at 50% 50%,#f0f6ff 0%,rgba(240,246,255,.6) 55%,rgba(240,246,255,0) 100%);
  padding-top:77px
}

.solution-diagram {
  display:grid;
  grid-template-columns:minmax(0,240fr) minmax(0,150fr) minmax(0,210fr) minmax(0,85fr) minmax(0,315fr);
  align-items:center;
  max-width:1100px;
  margin:0 auto
}

.source-list {
  display:grid;
  gap:8px
}

.source-list>div {
  padding:9px 13px;
  height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #e7eef9;
  background:white;
  border-radius:17px;
  font-size:11px;
  box-shadow:0 4px 12px #1d4a8204
}

.source-icon {
  color:var(--blue);
  background:#edf3ff;
  width:28px;
  height:28px;
  border-radius:7px;
  display:grid;
  place-items:center
}

.source-icon svg {
  width:17px;
  height:17px
}

.flow-lines {
  height:328px;
  width:100%;
  overflow:visible
}

.incoming-paths {
  stroke:url(#incoming-flow);
  stroke-width:5;
  fill:none
}

.flow-arrowhead {
  fill:#b9d6ff;
  stroke:none
}

.engine {
  text-align:center;
  position:relative;
  height:328px;
  display:flex;
  align-items:center;
  justify-content:center
}

.engine-label {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:600;
  color:#2b5ea9;
  background:white;
  border:1px solid #e0eaff;
  border-radius:20px;
  padding:5px 11px;
  box-shadow:0 3px 8px #075bff0b;
  position:absolute;
  top:22px;
  z-index:1;
  white-space:nowrap
}

.engine-label svg {
  width:13px;
  height:13px
}

.engine-art {
  width:225px;
  max-width:none;
  flex-shrink:0;
  filter:drop-shadow(0 13px 16px #548bdf22)
}

.engine-art img {
  width:100%;
  height:auto
}

.engine-caption {
  font-size:11px;
  color:#405779;
  line-height:1.6;
  display:flex;
  align-items:center;
  gap:7px;
  position:absolute;
  top:258px;
  left:6px;
  white-space:nowrap;
  text-align:left;
  font-style:italic;
  font-weight:600;
  transform:rotate(-7deg)
}

.engine-caption svg {
  width:27px;
  height:48px;
  stroke:#778cab;
  stroke-width:1.3;
  transform:rotate(7deg) translateY(-13px)
}

.flow-arrow svg {
  width:100%;
  height:88px;
  fill:url(#outgoing-flow);
  stroke:none;
  display:block
}

.solution-orders {
  padding:20px 18px;
  background:#fff;
  border:1px solid #e5edf9;
  border-radius:18px;
  box-shadow:0 9px 28px #4874b00a
}

.orders-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  margin-bottom:17px
}

.solution-orders>div:not(:first-child) {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px
}

.solution-orders p {
  margin:0;
  font-size:10px;
  font-weight:500
}

.solution-orders small {
  display:block;
  font-size:9px;
  color:#8592a6;
  font-weight:400;
  margin-top:4px
}

.solution-orders em {
  font-style:normal;
  color:#4b8f7e
}

.diagram-disclaimer {
  font-size:8px;
  color:#99a5b7;
  display:block;
  border-top:1px solid #edf2f9;
  padding-top:10px
}

.how-section {
  padding-top:65px
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.steps article {
  position:relative;
  display:flex;
  gap:17px;
  padding:23px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:0 5px 18px #2b548508
}

.step-number {
  font-weight:650;
  background:var(--blue);
  color:white;
  width:34px;
  height:34px;
  border-radius:50%;
  box-shadow:0 0 0 7px #edf4ff;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size:15px
}

.steps h3 {
  font-size:14px;
  margin-bottom:7px;
  letter-spacing:-.1px
}

.steps p {
  font-size:11px;
  color:#75849d;
  line-height:1.7;
  margin:0
}

.demo-section {
  padding-top:80px
}

.demo-grid {
  display:grid;
  grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  gap:22px
}

.demo-input-panel {
  padding:30px;
  background:linear-gradient(130deg,#f2f7ff,#f8faff);
  border-radius:16px;
  border:1px solid #e7effa;
  position:relative
}

.demo-label {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:9px;
  font-weight:600;
  letter-spacing:1px;
  color:#748cac;
  margin-bottom:22px
}

.demo-input-panel h3 {
  font-size:20px;
  font-weight:650;
  letter-spacing:-.5px;
  margin-bottom:18px
}

.demo-input-panel form {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.demo-input-panel input {
  border:1px solid #e1e8f5;
  background:white;
  border-radius:8px;
  padding:12px 13px;
  width:100%;
  font-size:12px;
  box-shadow:0 3px 8px #23447405;
  color:#263e61
}

.demo-input-panel .button {
  padding:12px 18px;
  font-size:12px
}

.suggestions-label {
  font-size:10px;
  color:#7a8aa3;
  margin:24px 0 9px
}

.suggestions {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}

.suggestions button {
  background:#e7effd;
  border:1px solid transparent;
  border-radius:6px;
  padding:6px 9px;
  font-size:9px;
  color:#4b6690;
  transition:.2s
}

.suggestions button:hover {
  background:#d6e6ff;
  border-color:#b6d0fa;
  color:var(--blue)
}

.demo-note {
  display:flex;
  align-items:center;
  gap:10px;
  margin:25px 0 19px;
  color:#6688bc
}

.demo-note svg {
  width:24px;
  height:24px
}

.demo-note p {
  font-size:11px;
  margin:0;
  line-height:1.6
}

.demo-disclaimer {
  font-size:9px;
  color:#8d9db6;
  line-height:1.7;
  margin:0;
  max-width:350px
}

.demo-output-panel {
  padding:25px 22px 17px;
  border:1px solid var(--line);
  background:white;
  border-radius:16px;
  box-shadow:0 6px 22px #294c7b08;
  min-width:0;
  transition:opacity .2s
}

.demo-output-panel[aria-busy=true] {
  opacity:.5
}

.demo-results-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:16px;
  border-bottom:1px solid #edf2f8
}

.demo-results-heading h3 {
  font-size:13px;
  margin:0
}

.demo-result {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid #edf2f8
}

.demo-result:last-child {
  border-bottom:0
}

.demo-result .order-icon {
  width:35px;
  height:35px
}

.demo-result-main {
  flex:1;
  min-width:0
}

.demo-result h4 {
  font-size:12px;
  font-weight:650;
  line-height:1.5;
  margin:0 0 5px
}

.result-source {
  font-weight:500;
  font-size:8px;
  border-radius:4px;
  padding:3px 5px;
  background:#eef4ff;
  color:#6688bd;
  white-space:nowrap;
  margin-left:4px;
  display:inline-block
}

.demo-result p {
  font-size:10px;
  color:#7c8da7;
  line-height:1.6;
  margin:0 0 5px
}

.result-meta {
  display:flex;
  align-items:center;
  gap:5px;
  color:#8b99ad;
  font-size:9px
}

.result-meta svg {
  width:11px;
  height:11px
}

.result-price {
  font-size:12px;
  font-weight:650;
  display:block;
  margin-top:5px;
  text-align:right;
  white-space:nowrap
}

.demo-result-side {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:17px
}

.demo-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:13px;
  border-top:1px solid #edf2f8
}

.demo-bottom>span {
  display:flex;
  align-items:center;
  gap:5px;
  color:#8899b0;
  font-size:8px
}

.demo-bottom svg {
  width:12px;
  height:12px
}

.text-button {
  background:none;
  border:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--blue);
  font-size:10px;
  font-weight:600;
  text-align:left
}

.text-button:hover {
  color:var(--blue-dark)
}

.text-button svg {
  width:14px;
  height:14px
}

.industries {
  padding-top:75px
}

.industry-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px
}

.industry-grid button {
  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  padding:16px 15px;
  font-size:11px;
  box-shadow:0 4px 13px #29588a05;
  transition:transform .2s,border-color .2s
}

.industry-grid button>svg {
  width:34px;
  height:34px;
  color:var(--blue);
  background:#f0f5ff;
  border-radius:8px;
  padding:8px
}

.industry-grid button>span {
  margin-left:auto;
  color:#9eb4d8;
  font-size:16px
}

.industry-grid button:hover {
  border-color:#b6d1ff;
  transform:translateY(-3px);
  background:#fbfdff
}

.scenarios {
  padding-top:75px
}

.scenario-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:19px
}

.scenario-card {
  position:relative;
  overflow:hidden;
  padding:26px 23px 22px;
  border:1px solid var(--line);
  border-radius:15px;
  background:linear-gradient(135deg,#fff,#f9fcff)
}

.scenario-kicker {
  font-size:9px;
  color:#83a1cd;
  font-weight:600;
  letter-spacing:1px;
  display:block;
  margin-bottom:13px
}

.scenario-card h3 {
  font-size:17px;
  font-weight:650;
  margin-bottom:9px;
  letter-spacing:-.4px
}

.scenario-card>p {
  font-size:11px;
  color:#7a89a1;
  line-height:1.7;
  max-width:260px;
  min-height:56px;
  margin-bottom:17px
}

.scenario-card ul {
  list-style:none;
  padding:0;
  margin:0 0 27px;
  font-size:10px;
  color:#637795;
  line-height:2.3;
  position:relative;
  z-index:1
}

.scenario-card li:before {
  content:'✓';
  display:inline-block;
  color:#378aff;
  background:#eaf3ff;
  border-radius:3px;
  width:13px;
  height:13px;
  font-size:9px;
  line-height:13px;
  text-align:center;
  margin-right:7px
}

.mini-chart {
  position:absolute;
  right:19px;
  bottom:50px;
  display:flex;
  align-items:end;
  gap:6px;
  height:65px;
  opacity:.7
}

.mini-chart i {
  width:7px;
  border-radius:3px;
  background:#99ceff;
  height:17px
}

.mini-chart i:nth-child(2) {
  height:26px
}

.mini-chart i:nth-child(3) {
  height:23px
}

.mini-chart i:nth-child(4) {
  height:37px
}

.mini-chart i:nth-child(5) {
  height:48px
}

.mini-chart i:nth-child(6) {
  height:63px;
  background:#65b3ff
}

.green-case {
  background:linear-gradient(135deg,#fff,#f9fdfa)
}

.green-case .mini-chart i {
  background:#9be09b
}

.green-case .mini-chart i:last-child {
  background:#67cb7a
}

.green-case li:before {
  color:#3fa667;
  background:#e8f6ec
}

.purple-case {
  background:linear-gradient(135deg,#fff,#fcf9ff)
}

.purple-case .mini-chart i {
  background:#c5a0ff
}

.purple-case .mini-chart i:last-child {
  background:#ac74fa
}

.purple-case li:before {
  color:#a367ee;
  background:#f2eafa
}

.pricing {
  padding-top:83px
}

.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.price-card {
  border:1px solid var(--line);
  padding:30px 24px 23px;
  border-radius:15px;
  position:relative;
  box-shadow:0 5px 18px #2b507c08;
  background:white;
  display:flex;
  flex-direction:column
}

.plan-type {
  font-size:8px;
  font-weight:600;
  letter-spacing:1px;
  color:#8799b6;
  margin-bottom:15px;
  display:block
}

.price-card h3 {
  font-size:25px;
  font-weight:650;
  letter-spacing:-.7px;
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1.2;
  margin-bottom:8px
}

.price-card h3 svg {
  color:var(--blue);
  fill:var(--blue);
  stroke:none;
  width:19px
}

.price-card>p {
  font-size:11px;
  color:#7b8ba4;
  min-height:36px;
  margin-bottom:18px
}

.price {
  font-size:22px;
  letter-spacing:-.6px;
  font-weight:600;
  line-height:1.2;
  border-bottom:1px solid #e6edf8;
  padding-bottom:21px;
  margin-bottom:20px
}

.price>span {
  display:block;
  font-size:9px;
  color:#8b9bb1;
  font-weight:400;
  margin-top:8px;
  letter-spacing:0
}

.price-card ul {
  list-style:none;
  padding:0;
  margin:0 0 27px;
  line-height:2.5;
  font-size:11px;
  color:#566982
}

.price-card li:before {
  content:'✓';
  color:#46628c;
  margin-right:9px
}

.price-card .button {
  width:100%;
  padding:13px 12px;
  font-size:12px;
  margin-top:auto
}

.featured {
  border-color:var(--blue);
  box-shadow:0 0 0 4px #075bff08,0 13px 32px #075bff12;
  background:linear-gradient(145deg,#fff 35%,#f2f7ff)
}

.popular {
  position:absolute;
  right:15px;
  top:-12px;
  background:var(--blue);
  color:white;
  font-size:9px;
  line-height:1;
  border-radius:5px;
  padding:7px 10px;
  box-shadow:0 3px 7px #075bff25
}

.faq {
  padding-top:95px;
  padding-bottom:82px
}

.faq-grid {
  display:grid;
  grid-template-columns:minmax(0,38fr) minmax(0,62fr);
  gap:28px
}

.faq h2 {
  font-size:35px;
  line-height:1.25
}

.faq-grid>div:first-child>p {
  font-size:12px;
  color:#7f8ca2;
  line-height:1.8
}

.faq-list {
  border-top:1px solid var(--line)
}

.faq-list details {
  border-bottom:1px solid var(--line);
  padding:17px 0
}

.faq-list summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  font-size:13px;
  font-weight:550
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary span {
  color:#7f98be;
  display:grid;
  place-items:center;
  background:#f1f5fc;
  width:25px;
  height:25px;
  border-radius:6px;
  font-size:18px;
  font-weight:400;
  flex-shrink:0;
  transition:transform .2s
}

.faq-list details[open] summary span {
  transform:rotate(45deg);
  background:#e8f0ff;
  color:var(--blue)
}

.faq-list details p {
  font-size:11px;
  color:#7889a3;
  line-height:1.85;
  margin:13px 38px 0 0;
  max-width:590px
}

.final-cta {
  border-radius:19px;
  background:radial-gradient(ellipse at 75% 90%,#1d3980,transparent 60%),#121c2d;
  color:white;
  padding:40px 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
  gap:30px;
  box-shadow:0 8px 24px #172b5017
}

.final-cta>div:first-child {
  position:relative;
  z-index:1;
  max-width:600px
}

.final-cta>div:first-child>span {
  font-size:9px;
  color:#a7b9db;
  letter-spacing:1px;
  display:block;
  margin-bottom:12px
}

.final-cta h2 {
  font-size:29px;
  letter-spacing:-.9px;
  margin-bottom:12px;
  line-height:1.25
}

.final-cta p {
  font-size:11px;
  color:#a7b5d0;
  margin:0
}

.final-cta>img {
  position:absolute;
  left:56%;
  width:275px;
  top:-35px;
  opacity:.54;
  transform:rotate(-10deg)
}

.final-cta-action {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px
}

.final-cta-action .button {
  padding:17px 27px;
  box-shadow:0 0 30px #075bff55
}

.final-cta-action>span {
  font-size:9px;
  color:#a6b7d6
}

.footer {
  padding:39px 0 22px
}

.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:26px
}

.footer .brand {
  font-size:22px
}

.footer .brand-bolt {
  width:27px;
  height:33px
}

.footer-top p {
  font-size:9px;
  color:#8798b3;
  margin:10px 0 0
}

.footer nav {
  display:flex;
  gap:24px;
  color:#677994;
  font-size:10px;
  align-items:center
}

.footer nav .text-button {
  font-size:10px;
  font-weight:400;
  color:#677994
}

.footer-to-top {
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  background:#f1f5fc;
  border-radius:10px;
  color:#5c7bb0;
  font-size:18px;
  flex-shrink:0
}

.footer-bottom {
  border-top:1px solid #edf2f9;
  display:flex;
  justify-content:space-between;
  padding-top:18px;
  margin-top:25px;
  color:#94a3ba;
  font-size:9px
}

.modal {
  max-width:480px;
  width:calc(100% - 32px);
  border:1px solid #e1eafa;
  border-radius:21px;
  padding:35px;
  box-shadow:0 24px 90px #111e4b35;
  color:var(--ink)
}

.modal::backdrop {
  background:#101b3c88;
  backdrop-filter:blur(7px)
}

.modal h2 {
  font-size:29px
}

.modal>p {
  font-size:12px;
  color:#73849d;
  line-height:1.75
}

.modal-close {
  position:absolute;
  right:16px;
  top:16px;
  background:#f2f6fc;
  border:0;
  border-radius:7px;
  padding:6px;
  display:grid;
  place-items:center
}

.modal-close svg {
  width:16px;
  height:16px
}

.modal form {
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:21px
}

.modal label {
  font-size:11px;
  font-weight:550;
  margin-top:5px
}

.modal input,.modal select {
  width:100%;
  border:1px solid #dce6f4;
  border-radius:8px;
  padding:12px;
  color:#365070;
  background:#fbfdff;
  font-size:12px
}

.modal .button {
  margin-top:12px
}

.modal-login {
  display:block;
  text-align:center;
  font-size:10px;
  color:#6984aa;
  margin-top:16px
}

.form-status {
  font-size:11px;
  color:var(--green);
  text-align:center
}

.privacy-modal h2 {
  margin-top:16px
}

.privacy-modal>p:last-child {
  font-size:10px;
  color:#98a6ba
}

body:has(dialog[open]) {
  overflow:hidden
}

@media(min-width:1450px) {
  .hero-grid {
    min-height:640px
  }
  .hero-visual {
    margin-right:-50px
  }
  .product-window {
    --mini-height:440px
  }
}

@media(max-width:1150px) {
  .container {
    width:calc(100% - 48px)
  }
  .header-inner {
    gap:24px
  }
  .navigation {
    gap:17px
  }
  .hero-grid {
    grid-template-columns:minmax(0,44fr) minmax(0,56fr);
    gap:0;
    min-height:560px
  }
  h1 {
    font-size:54px;
    letter-spacing:-2.8px
  }
  .hero-copy {
    padding-right:16px
  }
  .hero-description {
    font-size:13px
  }
  .hero-buttons {
    gap:8px
  }
  .hero-buttons .button {
    font-size:11px;
    padding:13px 14px;
    gap:7px
  }
  .hero-benefits {
    gap:8px
  }
  .hero-benefits>div {
    font-size:9px;
    gap:6px
  }
  .icon-bubble {
    width:30px;
    height:30px
  }
  .hero-visual {
    margin-right:-20px
  }
  .product-sidebar {
    width:105px;
    font-size:7px
  }
  .product-main {
    padding:15px 10px 10px
  }
  .product-row {
    gap:6px;
    padding:10px 6px
  }
  .product-row h4 {
    font-size:8px
  }
  .product-row-side {
    gap:5px
  }
  .product-row-side>b {
    font-size:8px
  }
  .hero-note {
    left:160px
  }
  .match-notification {
    left:110px
  }
  .solution-diagram {
    grid-template-columns:minmax(0,240fr) minmax(0,150fr) minmax(0,210fr) minmax(0,85fr) minmax(0,315fr)
  }
  .engine-art {
    width:205px
  }
  .flow-arrow svg {
    height:80px
  }
  .section {
    padding-top:65px
  }
  .problem-card {
    padding:22px 17px 18px
  }
  .problem-card h3 {
    font-size:15px
  }
  .industry-grid button {
    font-size:10px;
    gap:8px;
    padding:14px 11px
  }
  .demo-grid {
    gap:16px;
    grid-template-columns:minmax(0,44fr) minmax(0,56fr)
  }
  .demo-input-panel {
    padding:25px
  }
  .demo-output-panel {
    padding:22px 19px 17px
  }
  .demo-result h4 {
    font-size:11px
  }
  .footer nav {
    gap:16px
  }
  .final-cta>img {
    left:54%
  }
}

@media(max-width:900px) {
  .header {
    height:75px
  }
  .navigation {
    gap:13px;
    font-size:11px
  }
  .navigation a:nth-child(3),.navigation a:last-child {
    display:none
  }
  .header-inner {
    gap:20px
  }
  .header-actions .button {
    font-size:11px;
    padding:10px 13px
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:35px;
    padding-top:50px;
    padding-bottom:65px
  }
  .hero-copy {
    max-width:570px;
    margin-inline:auto;
    padding:0;
    text-align:center
  }
  h1 {
    font-size:68px;
    letter-spacing:-3px
  }
  h1 br {
    display:none
  }
  .hero-description {
    margin-inline:auto;
    font-size:14px;
    max-width:485px
  }
  .hero-buttons {
    justify-content:center
  }
  .hero-buttons .button {
    font-size:12px;
    padding:14px 19px
  }
  .hero-benefits {
    margin:auto;
    max-width:450px;
    justify-content:center;
    gap:30px;
    text-align:left
  }
  .hero-visual {
    margin:0 auto;
    max-width:680px;
    width:100%;
    padding-top:25px
  }
  .hero-note {
    top:-17px;
    left:250px;
    font-size:10px
  }
  .product-window {
    --mini-height:500px;
    transform:perspective(1500px) rotateY(-4deg) rotateZ(1deg)
  }
  .product-sidebar {
    width:135px;
    font-size:9px
  }
  .product-main {
    padding:18px
  }
  .product-row h4 {
    font-size:11px
  }
  .product-row {
    padding:12px 10px
  }
  .product-row-side>b {
    font-size:11px
  }
  .product-row-side .match-score {
    font-size:8px
  }
  .row-meta {
    font-size:8px
  }
  .product-search input {
    font-size:11px
  }
  .product-topline {
    font-size:10px
  }
  .product-tabs button {
    font-size:9px
  }
  .product-footer {
    font-size:8px
  }
  .match-notification {
    left:230px
  }
  .source-strip {
    flex-wrap:wrap;
    justify-content:center;
    gap:17px 28px;
    padding-block:22px
  }
  .source-strip>span {
    display:none
  }
  .source-strip>div {
    font-size:10px
  }
  .source-strip svg {
    width:18px;
    height:18px
  }
  h2 {
    font-size:31px
  }
  .problem-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .problem-card h3 {
    max-width:none
  }
  .problem-card>span {
    font-size:10px
  }
  .solution-diagram {
    grid-template-columns:minmax(0,240fr) minmax(0,150fr) minmax(0,210fr) minmax(0,85fr) minmax(0,315fr)
  }
  .source-list>div {
    font-size:9px;
    padding:8px;
    gap:7px
  }
  .source-icon {
    width:24px;
    height:24px
  }
  .engine-art {
    width:165px
  }
  .engine-label {
    font-size:8px;
    padding:5px 7px
  }
  .solution-orders {
    padding:16px 12px
  }
  .solution-orders p {
    font-size:9px
  }
  .solution-orders small {
    font-size:8px
  }
  .flow-arrow svg {
    height:70px
  }
  .engine-caption {
    font-size:9px;
    left:-5px
  }
  .orders-heading {
    font-size:11px
  }
  .steps {
    gap:12px
  }
  .steps article {
    padding:20px 14px;
    gap:13px
  }
  .steps h3 {
    font-size:12px
  }
  .steps p {
    font-size:10px
  }
  .step-number {
    width:28px;
    height:28px;
    font-size:12px;
    box-shadow:0 0 0 5px #edf4ff
  }
  .demo-grid {
    grid-template-columns:1fr 1fr
  }
  .demo-input-panel {
    padding:25px 20px
  }
  .demo-result {
    gap:8px;
    padding-block:17px
  }
  .demo-result-side {
    gap:12px
  }
  .demo-result p {
    font-size:9px
  }
  .result-price {
    font-size:10px
  }
  .demo-result .order-icon {
    width:28px;
    height:28px
  }
  .demo-result h4 {
    font-size:10px
  }
  .demo-results-heading h3 {
    font-size:11px
  }
  .demo-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:8px
  }
  .industry-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .industry-grid button {
    font-size:12px;
    padding:15px
  }
  .scenario-card {
    padding:23px 17px 20px
  }
  .scenario-card h3 {
    font-size:14px
  }
  .scenario-card>p {
    font-size:10px;
    min-height:68px
  }
  .scenario-card ul {
    font-size:9px
  }
  .mini-chart {
    opacity:.35;
    right:15px;
    bottom:60px
  }
  .price-card {
    padding:28px 18px 19px
  }
  .price-card>p {
    font-size:10px;
    min-height:32px
  }
  .price {
    font-size:20px
  }
  .price-card ul {
    font-size:10px
  }
  .price-card .button {
    font-size:10px
  }
  .faq-grid {
    grid-template-columns:minmax(0,35fr) minmax(0,65fr);
    gap:20px
  }
  .faq h2 {
    font-size:30px
  }
  .faq-list summary {
    font-size:12px
  }
  .final-cta {
    padding:30px 26px
  }
  .final-cta h2 {
    font-size:25px
  }
  .final-cta p {
    max-width:340px;
    font-size:10px
  }
  .final-cta-action .button {
    font-size:12px;
    padding:15px 20px
  }
  .final-cta>img {
    left:50%;
    width:245px;
    opacity:.32
  }
  .footer nav {
    gap:14px;
    flex-wrap:wrap;
    max-width:350px;
    justify-content:center
  }
  .footer-top {
    gap:20px
  }
}

@media(max-width:700px) {
  .container {
    width:calc(100% - 36px)
  }
  .header {
    height:71px
  }
  .header-inner {
    gap:10px;
    justify-content:space-between
  }
  .brand {
    font-size:22px
  }
  .brand-bolt {
    width:26px;
    height:32px
  }
  .brand small {
    font-size:8px
  }
  .header-actions {
    gap:9px
  }
  .header-actions .button-small {
    padding:9px 12px;
    font-size:10px
  }
  .header-actions .button-outline {
    display:none
  }
  .menu-toggle {
    display:block
  }
  .navigation {
    display:none;
    position:absolute;
    top:70px;
    left:0;
    right:0;
    padding:19px 22px;
    background:white;
    border-bottom:1px solid var(--line);
    box-shadow:0 10px 20px #1e406910;
    flex-direction:column;
    gap:17px;
    font-size:13px
  }
  .navigation.open {
    display:flex
  }
  .navigation a:nth-child(3),.navigation a:last-child {
    display:block
  }
  .hero-grid {
    padding-top:36px;
    gap:33px;
    padding-bottom:57px
  }
  .eyebrow-pill {
    font-size:9px
  }
  h1 {
    font-size:52px;
    letter-spacing:-2.9px;
    max-width:390px;
    margin:20px auto
  }
  h1 br {
    display:block
  }
  .hero-description {
    font-size:12px;
    max-width:390px;
    line-height:1.8;
    margin-bottom:22px
  }
  .hero-buttons .button {
    font-size:11px;
    padding:13px 15px;
    gap:7px
  }
  .hero-benefits {
    gap:19px
  }
  .hero-benefits>div {
    flex-direction:column;
    text-align:center;
    font-size:9px;
    gap:7px
  }
  .icon-bubble {
    width:33px;
    height:33px
  }
  .microcopy {
    font-size:9px;
    margin-bottom:23px
  }
  .hero-visual {
    max-width:500px;
    padding-top:28px
  }
  .hero-note {
    font-size:9px;
    left:42%;
    top:-12px
  }
  .hero-note svg {
    width:67px;
    left:70px;
    top:17px
  }
  .product-window {
    --mini-height:380px;
    border-width:4px;
    border-radius:16px;
  }
  .product-sidebar {
    width:83px;
    padding:15px 5px 12px;
    font-size:6px;
    gap:6px
  }
  .product-brand {
    font-size:13px;
    gap:0;
    margin-bottom:7px
  }
  .product-brand svg {
    width:12px
  }
  .product-sidebar>button {
    padding:5px 3px;
    gap:4px
  }
  .product-sidebar>button svg {
    width:9px;
    height:9px
  }
  .product-sidebar b {
    font-size:5px
  }
  .sidebar-bottom {
    font-size:6px;
    gap:4px
  }
  .avatar {
    width:17px;
    height:17px
  }
  .product-main {
    padding:12px 9px 9px;
    border-radius:10px
  }
  .product-topline {
    font-size:8px;
    margin-bottom:10px
  }
  .product-search {
    gap:3px;
    padding:3px
  }
  .product-search>svg {
    width:10px;
    height:10px
  }
  .product-search input {
    font-size:8px
  }
  .product-search button {
    padding:8px 10px;
    font-size:8px
  }
  .product-tabs {
    margin:10px 0 9px;
    gap:2px
  }
  .product-tabs button {
    font-size:6px;
    padding:4px 5px
  }
  .product-tabs button span {
    margin-left:2px
  }
  .product-results {
    gap:5px
  }
  .product-row {
    padding:9px 5px;
    gap:6px;
    border-radius:6px
  }
  .product-row .order-icon {
    width:21px;
    height:21px;
    border-radius:4px
  }
  .product-row .order-icon svg {
    width:13px;
    height:13px
  }
  .product-row h4 {
    font-size:7px;
    line-height:1.5;
    margin-bottom:4px;
    max-width:160px
  }
  .row-meta {
    font-size:6px;
    gap:5px
  }
  .product-row-side {
    gap:5px;
    flex-direction:column;
    align-items:end
  }
  .product-row-side>b {
    font-size:7px
  }
  .product-row-side .match-score {
    font-size:6px;
    padding:3px
  }
  .product-footer {
    font-size:6px;
    margin-top:8px;
    gap:3px
  }
  .product-footer>span:last-child {
    display:none
  }
  .match-notification {
    left:auto;
    right:17px;
    padding:9px 12px;
    gap:8px;
    bottom:-24px;
    border-radius:10px
  }
  .match-icon {
    width:26px;
    height:26px
  }
  .match-icon svg {
    width:15px
  }
  .match-notification b {
    font-size:9px
  }
  .match-notification div>span {
    font-size:7px
  }
  .notification-dot {
    width:5px;
    height:5px;
    margin-left:2px
  }
  .spark-one {
    font-size:25px;
    top:8px;
    right:4px
  }
  .spark-two {
    left:-8px;
    font-size:18px
  }
  .source-strip {
    gap:13px 22px;
    padding-block:19px
  }
  .source-strip>div {
    font-size:9px;
    gap:7px
  }
  .source-strip svg {
    width:16px
  }
  .section {
    padding-top:56px
  }
  .section-heading {
    margin-bottom:25px
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.2px;
    margin-bottom:10px
  }
  h2 {
    font-size:27px;
    letter-spacing:-.9px
  }
  .section-heading p {
    font-size:11px;
    padding-inline:7px
  }
  .section-heading h2 br {
    display:none
  }
  .problem-grid {
    gap:12px
  }
  .problem-card {
    padding:20px 16px 16px
  }
  .problem-card>svg {
    width:24px;
    height:24px;
    margin-bottom:11px
  }
  .problem-card h3 {
    font-size:14px;
    max-width:160px
  }
  .problem-card p {
    font-size:10px;
    margin-bottom:14px
  }
  .problem-card>span {
    font-size:8px;
    gap:5px
  }
  .solution-diagram {
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);
    gap:0;
    max-width:500px
  }
  .flow-lines {
    display:block;
    height:288px
  }
  .flow-arrow {
    display:block;
    grid-column:3;
    grid-row:2;
    width:46px;
    margin:0 auto 12px;
    transform:rotate(90deg)
  }
  .flow-arrow svg {
    height:50px
  }
  .source-list {
    gap:8px
  }
  .source-list>div {
    font-size:9px;
    padding:7px 8px;
    height:40px;
    gap:6px;
    border-radius:12px
  }
  .source-icon {
    width:24px;
    height:24px
  }
  .engine {
    grid-column:3;
    grid-row:1;
    height:288px
  }
  .engine-art {
    width:157px
  }
  .engine-label {
    font-size:8px;
    white-space:nowrap;
    padding:5px 6px;
    top:32px
  }
  .engine-caption {
    font-size:8px;
    top:222px;
    left:0;
    gap:3px
  }
  .engine-caption svg {
    width:17px;
    height:37px
  }
  .solution-orders {
    grid-column:1/-1;
    margin:0 auto;
    width:100%;
    padding:21px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 15px
  }
  .solution-orders .orders-heading {
    grid-column:1/-1;
    margin-bottom:21px;
    font-size:12px
  }
  .solution-orders p {
    font-size:9px
  }
  .solution-orders>div:not(:first-child) {
    gap:8px;
    margin-bottom:17px
  }
  .solution-orders .order-icon {
    width:28px;
    height:28px
  }
  .solution-orders small {
    font-size:8px
  }
  .diagram-disclaimer {
    grid-column:1/-1;
    text-align:center;
    font-size:8px
  }
  .steps {
    grid-template-columns:1fr;
    gap:12px;
    max-width:500px;
    margin:auto
  }
  .steps article {
    padding:22px 21px;
    gap:19px
  }
  .step-number {
    width:31px;
    height:31px;
    font-size:14px
  }
  .steps h3 {
    font-size:14px
  }
  .steps p {
    font-size:11px
  }
  .demo-grid {
    grid-template-columns:1fr;
    gap:15px;
    max-width:500px;
    margin:auto
  }
  .demo-input-panel {
    padding:24px
  }
  .demo-label {
    margin-bottom:16px
  }
  .demo-input-panel h3 {
    font-size:19px
  }
  .demo-input-panel form {
    flex-wrap:nowrap
  }
  .demo-input-panel input {
    min-width:0;
    font-size:10px
  }
  .demo-input-panel .button {
    font-size:10px;
    padding:12px;
    gap:6px
  }
  .demo-input-panel .button svg {
    width:14px
  }
  .suggestions {
    gap:6px
  }
  .suggestions button {
    font-size:9px
  }
  .demo-note {
    margin:20px 0 14px
  }
  .demo-output-panel {
    padding:22px
  }
  .demo-results-heading h3 {
    font-size:12px
  }
  .demo-result {
    gap:11px;
    padding-block:18px
  }
  .demo-result h4 {
    font-size:11px
  }
  .demo-result p {
    font-size:10px
  }
  .demo-result .order-icon {
    width:32px;
    height:32px
  }
  .demo-result-side {
    gap:17px
  }
  .result-price {
    font-size:11px
  }
  .demo-bottom {
    flex-direction:row;
    align-items:center;
    font-size:8px
  }
  .demo-bottom>span {
    max-width:180px;
    line-height:1.5
  }
  .demo-bottom .text-button {
    font-size:9px
  }
  .industry-grid {
    gap:10px
  }
  .industry-grid button {
    padding:12px 10px;
    gap:7px;
    font-size:10px
  }
  .industry-grid button>svg {
    width:30px;
    height:30px;
    padding:7px
  }
  .industry-grid button>span {
    font-size:14px
  }
  .scenario-grid {
    grid-template-columns:1fr;
    gap:13px;
    max-width:500px;
    margin:auto
  }
  .scenario-card {
    padding:24px
  }
  .scenario-card h3 {
    font-size:18px
  }
  .scenario-card>p {
    font-size:11px;
    min-height:0;
    max-width:330px
  }
  .scenario-card ul {
    font-size:11px;
    margin-bottom:20px
  }
  .scenario-card .text-button {
    font-size:11px
  }
  .mini-chart {
    right:25px;
    bottom:44px;
    opacity:.65;
    gap:7px;
    height:78px
  }
  .mini-chart i {
    width:9px
  }
  .pricing-grid {
    grid-template-columns:1fr;
    gap:25px;
    max-width:500px;
    margin:auto
  }
  .price-card {
    padding:25px
  }
  .price-card>p {
    min-height:0;
    font-size:12px;
    margin-bottom:20px
  }
  .price-card h3 {
    font-size:27px
  }
  .plan-type {
    font-size:9px
  }
  .price {
    font-size:24px;
    margin-bottom:14px;
    padding-bottom:20px
  }
  .price-card ul {
    font-size:12px;
    margin-bottom:22px
  }
  .price-card .button {
    font-size:12px
  }
  .featured {
    order:-1
  }
  .faq {
    padding-bottom:45px
  }
  .faq-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .faq h2 {
    font-size:30px
  }
  .faq h2 br {
    display:none
  }
  .faq-grid>div:first-child>p br {
    display:none
  }
  .faq-grid>div:first-child>p {
    font-size:11px
  }
  .faq-list summary {
    font-size:12px
  }
  .faq-list details p {
    font-size:11px
  }
  .final-cta {
    flex-direction:column;
    align-items:flex-start;
    padding:30px 26px;
    gap:24px
  }
  .final-cta h2 {
    font-size:28px
  }
  .final-cta p {
    max-width:290px;
    font-size:11px
  }
  .final-cta-action {
    align-items:flex-start;
    gap:9px
  }
  .final-cta-action .button {
    font-size:12px;
    padding:15px 22px
  }
  .final-cta>img {
    left:auto;
    right:-90px;
    top:75px;
    width:260px;
    opacity:.3
  }
  .footer {
    padding-top:31px
  }
  .footer-top {
    align-items:flex-start;
    flex-wrap:wrap;
    gap:22px
  }
  .footer nav {
    order:3;
    width:100%;
    max-width:none;
    justify-content:flex-start;
    gap:15px 21px;
    font-size:10px
  }
  .footer-to-top {
    margin-left:auto
  }
  .footer-bottom {
    font-size:8px;
    gap:12px
  }
  .modal {
    padding:30px 24px
  }
  .modal h2 {
    font-size:27px
  }
}

@media(max-width:380px) {
  .container {
    width:calc(100% - 28px)
  }
  h1 {
    font-size:48px
  }
  .hero-buttons .button {
    font-size:10px;
    padding:12px 11px
  }
  .hero-benefits {
    gap:15px
  }
  .product-sidebar {
    width:71px;
    font-size:5px
  }
  .product-sidebar>button {
    gap:3px
  }
  .product-row h4 {
    font-size:6px
  }
  .product-row-side>b {
    font-size:6px
  }
  .product-search input {
    font-size:7px
  }
  .problem-card {
    padding:17px 13px
  }
  .problem-card h3 {
    font-size:12px
  }
  .problem-card p {
    font-size:9px
  }
  .solution-diagram {
    grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)
  }
  .source-list>div {
    font-size:8px;
    padding:7px;
    gap:4px
  }
  .source-icon {
    width:21px;
    height:21px
  }
  .engine-art {
    width:145px
  }
  .solution-orders {
    padding:17px
  }
  .solution-orders p {
    font-size:8px
  }
  .solution-orders small {
    font-size:7px
  }
  .solution-orders .order-icon {
    width:23px;
    height:23px
  }
  .demo-input-panel {
    padding:20px
  }
  .demo-input-panel form {
    flex-wrap:wrap
  }
  .demo-input-panel input {
    font-size:11px
  }
  .demo-result h4 {
    font-size:10px
  }
  .result-price {
    font-size:10px
  }
  .demo-bottom {
    align-items:flex-start
  }
  .industry-grid button {
    font-size:9px
  }
  .industry-grid button>span {
    display:none
  }
  .final-cta h2 {
    font-size:25px
  }
}

/* Появление при прокрутке и отклик панелей на движение мыши. */
.reveal {
  opacity:0;
  translate:0 24px;
  transition:opacity .65s ease,translate .75s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms)
}

.reveal.is-visible {
  opacity:1;
  translate:0 0
}

.interactive-panel {
  position:relative;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease
}

.interactive-panel.reveal {
  transition:opacity .65s ease var(--reveal-delay,0ms),translate .75s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),transform .3s ease,box-shadow .3s ease,border-color .3s ease
}

.interactive-panel::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(230px circle at var(--pointer-x,50%) var(--pointer-y,50%),#075bff09,transparent 75%);
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease
}

.source-list>div,.solution-orders>div:not(:first-child) {
  transition:transform .25s ease,background .25s ease,border-color .25s ease
}

.product-window {
  transition:transform .65s cubic-bezier(.22,1,.36,1),box-shadow .65s ease
}

.button svg,.text-button svg {
  transition:transform .25s ease
}

.navigation>a {
  position:relative
}

.navigation>a::after {
  content:'';
  position:absolute;
  bottom:-7px;
  left:0;
  right:0;
  height:2px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease
}

@media(hover:hover) and (pointer:fine) {
  .interactive-panel:hover {
    transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px);
    box-shadow:0 15px 32px #1b5dc017;
    border-color:#bcd3f8;
    z-index:2
  }
  .interactive-panel:hover::after {
    opacity:1
  }
  .source-list>div:hover {
    transform:translateX(4px);
    border-color:#bcd3f8;
    background:#f7faff
  }
  .solution-orders>div:not(:first-child):hover {
    transform:translateX(3px)
  }
  .hero-visual:hover .product-window {
    transform:perspective(1500px) rotateY(-3deg) rotateZ(0deg) translateY(-4px);
    box-shadow:0 34px 60px #183d7930,0 5px 9px #14284920
  }
  .button:hover svg,.text-button:hover svg {
    transform:translateX(3px)
  }
  .navigation>a:hover::after {
    transform:scaleX(1)
  }
}

@media(prefers-reduced-motion:no-preference) {
  .mini-chart i {
    transform-origin:center bottom;
    animation:order-impulse var(--pulse-period,2.1s) ease-in-out infinite;
    animation-play-state:paused
  }
  .mini-chart i:nth-child(2) { animation-delay:-.7s }
  .mini-chart i:nth-child(3) { animation-delay:-1.35s }
  .mini-chart i:nth-child(4) { animation-delay:-.35s }
  .mini-chart i:nth-child(5) { animation-delay:-1.05s }
  .mini-chart i:nth-child(6) { animation-delay:-1.6s }
  .green-case .mini-chart { --pulse-period:2.4s }
  .purple-case .mini-chart { --pulse-period:1.85s }
  .solution-diagram.reveal .incoming-paths path {
    stroke-dasharray:500;
    stroke-dashoffset:500;
    opacity:0;
    transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1),opacity .3s ease
  }
  .solution-diagram.is-visible .incoming-paths path {
    stroke-dashoffset:0;
    opacity:1
  }
  .incoming-paths path:nth-child(2),.incoming-paths path:nth-child(5) {
    transition-delay:80ms
  }
  .incoming-paths path:nth-child(3),.incoming-paths path:nth-child(4) {
    transition-delay:160ms
  }
  .solution-diagram.in-view .engine-art {
    animation:engine-float 5s ease-in-out infinite
  }
}

@keyframes engine-float {
  0%,100% { transform:translateY(0) }
  50% { transform:translateY(-5px) }
}

@keyframes order-impulse {
  0%,100% { transform:scaleY(.72) }
  18% { transform:scaleY(1) }
  38% { transform:scaleY(.45) }
  58% { transform:scaleY(.88) }
  78% { transform:scaleY(.56) }
}

@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
  .reveal {
    opacity:1;
    translate:none
  }
  .interactive-panel:hover,.source-list>div:hover,.solution-orders>div:not(:first-child):hover,.button:hover,.problem-card:hover,.industry-grid button:hover {
    transform:none
  }
  .hero-visual:hover .product-window {
    transform:perspective(1500px) rotateY(-7deg) rotateZ(1.5deg)
  }
  .button:hover svg,.text-button:hover svg,.navigation>a::after {
    transform:none
  }
}