:root {
  --ink: #111329;
  --ink-soft: #5c6278;
  --muted: #7a8095;
  --line: #e6e7ef;
  --line-dark: rgba(255, 255, 255, 0.12);
  --surface: #ffffff;
  --surface-soft: #f7f7fb;
  --surface-purple: #f1efff;
  --purple: #6d5dfb;
  --purple-dark: #5545e9;
  --purple-light: #9f94ff;
  --navy: #111426;
  --navy-deep: #090b18;
  --mint: #60d7a7;
  --orange: #ff9b68;
  --shadow-sm: 0 8px 30px rgba(22, 20, 55, 0.08);
  --shadow-md: 0 20px 70px rgba(28, 24, 73, 0.13);
  --shadow-lg: 0 40px 110px rgba(30, 22, 88, 0.18);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --container: 1200px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: Inter, "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

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

button,
input {
  font: inherit;
}

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

button {
  color: inherit;
}

svg {
  display: block;
  width: 1.15em;
  height: 1.15em;
}

[hidden] {
  display: none !important;
}

::selection {
  color: #fff;
  background: var(--purple);
}

:focus-visible {
  outline: 3px solid rgba(109, 93, 251, 0.42);
  outline-offset: 4px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  color: #fff;
  background: var(--navy);
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.section {
  padding: 132px 0;
}

.section-kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--purple);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.section-kicker-light {
  color: #b8afff;
}

.eyebrow {
  padding: 9px 12px;
  border: 1px solid rgba(109, 93, 251, 0.18);
  border-radius: 999px;
  color: #5d50dc;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 7px 24px rgba(78, 61, 191, 0.07);
  backdrop-filter: blur(12px);
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 4px rgba(109, 93, 251, 0.13);
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 21px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.button::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, 0.28) 50%, transparent 72%);
  content: "";
  transform: translateX(-120%);
  transition: transform 550ms ease;
}

.button:hover::after {
  transform: translateX(120%);
}

.button:hover {
  transform: translateY(-2px);
}

.button svg {
  position: relative;
  z-index: 1;
  transition: transform 180ms ease;
}

.button:hover svg {
  transform: translateX(3px);
}

.button-small {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 11px;
  font-size: 13px;
}

.button-primary {
  color: #fff;
  background: linear-gradient(135deg, #7969ff 0%, #5c4ae9 100%);
  box-shadow: 0 10px 26px rgba(91, 73, 232, 0.28);
}

.button-primary:hover {
  box-shadow: 0 14px 34px rgba(91, 73, 232, 0.38);
}

.button-secondary {
  border-color: #dcdeea;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(30, 28, 61, 0.06);
}

.button-secondary:hover {
  border-color: #c6c2f5;
  background: #fff;
  box-shadow: 0 12px 30px rgba(30, 28, 61, 0.1);
}

.button-dark {
  color: #fff;
  background: var(--navy);
  box-shadow: 0 10px 24px rgba(17, 20, 38, 0.18);
}

.button-white {
  color: #5142dc;
  background: #fff;
  box-shadow: 0 16px 35px rgba(15, 11, 59, 0.22);
}

.button-glass {
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.play-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--purple);
  background: var(--surface-purple);
}

.play-icon svg {
  width: 13px;
  height: 13px;
}

/* Header */
.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.site-header.is-scrolled,
.site-header.menu-visible {
  border-color: rgba(220, 221, 231, 0.82);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 30px rgba(20, 19, 47, 0.05);
  backdrop-filter: blur(18px) saturate(150%);
}

.nav-shell {
  display: flex;
  width: min(calc(100% - 48px), var(--container));
  height: 78px;
  align-items: center;
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 820;
  letter-spacing: -0.035em;
}

.logo-mark {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(145deg, #7a69ff 2%, #5d4ce9 72%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.34), 0 7px 18px rgba(93, 76, 233, 0.28);
}

.logo-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(38deg);
}

.logo-orbit-two {
  transform: translate(-50%, -50%) rotate(-38deg);
}

.logo-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  transform: translate(-50%, -50%);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 31px;
  margin-left: 78px;
}

.desktop-nav a,
.nav-login {
  position: relative;
  color: #50566b;
  font-size: 13px;
  font-weight: 650;
  transition: color 160ms ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  border-radius: 3px;
  background: var(--purple);
  content: "";
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.desktop-nav a:hover,
.nav-login:hover {
  color: var(--ink);
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}

.menu-toggle,
.mobile-menu {
  display: none;
}

/* Hero */
.hero {
  position: relative;
  display: flex;
  min-height: 820px;
  align-items: center;
  overflow: hidden;
  padding: 145px 0 92px;
  background:
    radial-gradient(circle at 68% 12%, rgba(185, 175, 255, 0.22), transparent 31%),
    linear-gradient(180deg, #fbfaff 0%, #ffffff 72%);
}

.hero::before {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background-image: linear-gradient(rgba(93, 75, 225, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 75, 225, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  content: "";
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.hero-glow-one {
  top: 120px;
  right: -160px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(109, 93, 251, 0.16);
  box-shadow: 0 0 0 70px rgba(109, 93, 251, 0.025), 0 0 0 140px rgba(109, 93, 251, 0.018);
}

.hero-glow-two {
  bottom: -190px;
  left: 32%;
  width: 380px;
  height: 380px;
  background: rgba(126, 109, 255, 0.07);
  filter: blur(70px);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(380px, 0.88fr) minmax(590px, 1.12fr);
  gap: 62px;
  align-items: center;
}

.hero-copy {
  padding-bottom: 22px;
}

.hero h1 {
  max-width: 660px;
  margin: 25px 0 23px;
  color: var(--ink);
  font-size: clamp(57px, 5.4vw, 78px);
  font-weight: 770;
  line-height: 0.98;
  letter-spacing: -0.063em;
}

.hero h1 span,
.section-heading h2 span,
.center-heading h2 span,
.integration-copy h2 span,
.outcomes-heading h2 span,
.pricing-head h2 span,
.faq-intro h2 span,
.final-cta h2 span {
  color: var(--purple);
}

.hero-lead {
  max-width: 570px;
  margin: 0;
  color: #60667a;
  font-size: 18px;
  line-height: 1.72;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 26px;
  color: #6a7085;
  font-size: 11px;
  font-weight: 640;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-proof svg {
  width: 13px;
  height: 13px;
  color: var(--purple);
  stroke-width: 2.5;
}

.hero-product {
  position: relative;
  min-width: 0;
  padding: 36px 0 42px 28px;
}

.product-glow {
  position: absolute;
  z-index: -1;
  inset: 4% -16% -6% 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 93, 251, 0.18), transparent 67%);
  filter: blur(28px);
}

.dashboard-window {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(196, 195, 214, 0.76);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  transform: perspective(1600px) rotateY(-2.5deg) rotateX(1deg);
  transform-origin: center left;
}

.dashboard-topbar {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  height: 47px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid #e9eaf1;
  background: #fbfbfd;
}

.window-dots {
  display: flex;
  gap: 5px;
}

.window-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9dae4;
}

.window-dots i:first-child { background: #fa8d86; }
.window-dots i:nth-child(2) { background: #f5c66c; }
.window-dots i:last-child { background: #6fd2a5; }

.dashboard-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8a8fa0;
  font-size: 9px;
}

.dashboard-breadcrumb strong {
  color: #3d4255;
  font-weight: 700;
}

.dashboard-breadcrumb svg {
  width: 10px;
  height: 10px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid #d7eee3;
  border-radius: 999px;
  color: #258961;
  background: #f2fbf7;
  font-size: 8px;
  font-weight: 750;
}

.live-pill span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #43b582;
  box-shadow: 0 0 0 3px rgba(67, 181, 130, 0.12);
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 50px minmax(300px, 1fr) 166px;
  min-height: 435px;
}

.dashboard-sidebar {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  padding: 15px 7px 10px;
  border-right: 1px solid #e9eaf1;
  background: #fbfbfd;
}

.dashboard-sidebar .side-brand .logo-mark {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.side-brand {
  margin-bottom: 8px;
}

.side-item {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 8px;
  color: #9296a7;
}

.side-item svg {
  width: 13px;
  height: 13px;
}

.side-item.active {
  color: #6453ee;
  background: #eeeaff;
}

.side-avatar {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  margin-top: auto;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #5b59b7, #8c74ef);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.workflow-canvas {
  min-width: 0;
  padding: 19px 20px 20px;
  background-color: #f8f8fb;
  background-image: radial-gradient(#dcdce7 0.7px, transparent 0.7px);
  background-size: 13px 13px;
}

.canvas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.canvas-kicker {
  display: block;
  color: #9a9eae;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.canvas-head h2 {
  margin: 2px 0 0;
  color: #303447;
  font-size: 14px;
  letter-spacing: -0.02em;
}

.canvas-head button {
  border: 0;
  color: #979bab;
  background: transparent;
  font-size: 12px;
  letter-spacing: 1px;
}

.flow-stage {
  position: relative;
  max-width: 270px;
  margin: 27px auto 0;
}

.flow-rail {
  position: absolute;
  z-index: 0;
  top: 31px;
  bottom: 30px;
  left: 19px;
  width: 2px;
  background: #d4d2e7;
}

.flow-rail i {
  position: absolute;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9b8ffa;
  box-shadow: 0 0 0 4px rgba(109, 93, 251, 0.12);
  animation: flowPulse 3.3s ease-in-out infinite;
}

.flow-rail i:first-child { top: 11%; }
.flow-rail i:nth-child(2) { top: 46%; animation-delay: 1.1s; }
.flow-rail i:last-child { top: 81%; animation-delay: 2.2s; }

.flow-node {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 37px 1fr 18px;
  align-items: center;
  gap: 9px;
  min-height: 69px;
  margin-bottom: 20px;
  padding: 10px 10px;
  border: 1px solid #dedee8;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 7px 18px rgba(38, 35, 77, 0.055);
}

.flow-node:hover {
  border-color: #a89efa;
  box-shadow: 0 10px 24px rgba(73, 58, 166, 0.1);
}

.node-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 9px;
  color: #6554eb;
  background: #eeebff;
}

.node-icon svg { width: 15px; height: 15px; }
.node-logic .node-icon { color: #d47837; background: #fff0e3; }
.node-action .node-icon { color: #24845f; background: #e6f8f0; }

.flow-node small,
.flow-node strong,
.flow-node div span {
  display: block;
}

.flow-node small {
  margin-bottom: 1px;
  color: #9ca0b0;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.flow-node strong {
  color: #383c4e;
  font-size: 9px;
  line-height: 1.3;
}

.flow-node div span {
  margin-top: 2px;
  color: #989cab;
  font-size: 7px;
}

.flow-node em {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid #e0e1e8;
  border-radius: 5px;
  color: #a1a4b2;
  font-size: 7px;
  font-style: normal;
}

.add-step {
  position: relative;
  z-index: 2;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  margin: -10px 0 0 6px;
  border: 1px solid #d9d9e4;
  border-radius: 8px;
  color: #6b5cf0;
  background: #fff;
  box-shadow: 0 5px 12px rgba(42, 39, 79, 0.08);
}

.add-step svg { width: 12px; height: 12px; }

.dashboard-inspector {
  padding: 17px 13px;
  border-left: 1px solid #e9eaf1;
  background: #fff;
}

.inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #3c4052;
  font-size: 8px;
  font-weight: 760;
}

.inspector-head strong {
  color: #979bab;
  font-size: 7px;
  font-weight: 600;
}

.inspector-stat {
  position: relative;
  margin-top: 22px;
}

.inspector-stat strong,
.inspector-stat span {
  display: block;
}

.inspector-stat strong {
  color: #292d40;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.045em;
}

.inspector-stat span {
  margin-top: 4px;
  color: #969aaa;
  font-size: 7px;
}

.inspector-stat em {
  position: absolute;
  top: 4px;
  right: 0;
  padding: 3px 5px;
  border-radius: 5px;
  color: #26805f;
  background: #e8f8f1;
  font-size: 6px;
  font-style: normal;
  font-weight: 750;
}

.mini-chart {
  display: flex;
  height: 82px;
  align-items: flex-end;
  gap: 5px;
  margin-top: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ececf2;
}

.mini-chart span {
  width: 100%;
  height: var(--h);
  border-radius: 3px 3px 1px 1px;
  background: #e5e3f9;
  transition: height 700ms cubic-bezier(.2,.8,.2,1), background 200ms ease;
}

.mini-chart span.latest {
  background: linear-gradient(#8a7cf7, #6d5dfb);
}

.inspector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 13px;
}

.inspector-grid div {
  padding: 9px 7px;
  border: 1px solid #ececf2;
  border-radius: 7px;
}

.inspector-grid span,
.inspector-grid strong {
  display: block;
}

.inspector-grid span { color: #a0a3b1; font-size: 6px; }
.inspector-grid strong { margin-top: 3px; color: #3c4052; font-size: 10px; }

.activity-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid #ececf2;
}

.activity-icon {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 6px;
  color: #27845f;
  background: #e6f8f0;
}

.activity-icon svg { width: 10px; height: 10px; }
.activity-row strong,.activity-row div span { display: block; }
.activity-row strong { color: #44485a; font-size: 7px; }
.activity-row div span { color: #a1a4b2; font-size: 6px; }

.floating-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(214, 213, 229, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 45px rgba(39, 31, 100, 0.18);
  backdrop-filter: blur(14px);
}

.floating-saved {
  top: 2px;
  right: -22px;
  min-width: 208px;
  padding: 12px 13px;
  animation: floatCard 5s ease-in-out infinite;
}

.floating-icon {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border-radius: 9px;
  color: #6755ec;
  background: #eeebff;
}

.floating-icon svg { width: 15px; height: 15px; }
.floating-card div span,.floating-card div strong { display: block; }
.floating-card div span { color: #979aaa; font-size: 7px; }
.floating-card div strong { margin-top: 1px; color: #343849; font-size: 10px; }
.floating-saved em { margin-left: auto; color: #26805f; font-size: 7px; font-style: normal; font-weight: 800; }

.floating-run {
  right: 42px;
  bottom: 5px;
  min-width: 220px;
  padding: 12px 14px;
  animation: floatCard 5.4s 1.1s ease-in-out infinite;
}

.status-check {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #65d5a7, #38ad7d);
  box-shadow: 0 7px 16px rgba(57, 174, 126, 0.24);
}

.status-check svg { width: 14px; height: 14px; stroke-width: 2.6; }

/* Role strip */
.team-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.team-strip-inner {
  padding: 31px 0 32px;
  text-align: center;
}

.team-strip p {
  margin: 0 0 22px;
  color: #9498a9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.role-lockups {
  display: grid;
  grid-template-columns: repeat(5, auto);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #767b8d;
}

.role-lockups > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

.role-shape {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  opacity: 0.7;
}

.shape-one { border: 3px solid currentColor; border-radius: 50%; }
.shape-one::after { position:absolute; inset:4px; border:2px solid currentColor; border-radius:50%; content:""; }
.shape-two::before,.shape-two::after { position:absolute; inset:2px 8px; border-radius:9px; background:currentColor; content:""; transform:rotate(45deg); }
.shape-two::after { transform:rotate(-45deg); }
.shape-three { border: 3px solid currentColor; border-radius: 5px; transform: rotate(45deg) scale(.8); }
.shape-four::before,.shape-four::after { position:absolute; width:12px; height:12px; border:2px solid currentColor; border-radius:50%; content:""; }
.shape-four::after { right:0; bottom:0; }
.shape-five { background: repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 6px); border-radius:3px; transform:skew(-12deg); }

/* Headings */
.section-heading {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 63px;
}

.section-heading h2,
.center-heading h2,
.integration-copy h2,
.outcomes-heading h2,
.pricing-head h2,
.faq-intro h2 {
  margin: 17px 0 0;
  color: var(--ink);
  font-size: clamp(42px, 4.5vw, 62px);
  font-weight: 735;
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.section-heading > p {
  max-width: 470px;
  margin: 0 0 5px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.75;
}

.center-heading {
  max-width: 780px;
  margin: 0 auto 61px;
  text-align: center;
}

.center-heading p {
  max-width: 620px;
  margin: 20px auto 0;
  color: #b7b9c8;
  font-size: 16px;
}

.center-heading.dark-text p { color: var(--ink-soft); }

/* Features */
.features {
  background: #fff;
}

.bento-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  grid-template-areas: "builder insights" "rules insights" "team secure";
  gap: 18px;
}

.feature-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid #e4e4ed;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 10px 35px rgba(32, 29, 73, 0.045);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.feature-card:hover {
  border-color: #d5d1f1;
  box-shadow: 0 18px 48px rgba(32, 29, 73, 0.09);
  transform: translateY(-4px);
}

.feature-card h3 {
  margin: 20px 0 9px;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.feature-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.7;
}

.feature-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--purple);
  background: var(--surface-purple);
}

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

.feature-builder {
  grid-area: builder;
  display: grid;
  grid-template-columns: 0.76fr 1.24fr;
  min-height: 332px;
}

.feature-builder .feature-copy {
  position: relative;
  z-index: 2;
  padding: 34px 8px 32px 34px;
}

.feature-card a,
.solution-card a,
.faq-intro > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 23px;
  color: #594bdd;
  font-size: 12px;
  font-weight: 750;
}

.feature-card a svg,
.solution-card a svg,
.faq-intro > a svg {
  width: 14px;
  height: 14px;
  transition: transform 180ms ease;
}

.feature-card a:hover svg,
.solution-card a:hover svg,
.faq-intro > a:hover svg { transform: translateX(3px); }

.builder-preview {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.builder-preview::before {
  position: absolute;
  inset: 34px -40px -36px 13px;
  border: 1px solid #dedee9;
  border-radius: 16px 0 0 0;
  background: #fafafd;
  box-shadow: -15px 18px 40px rgba(35, 30, 82, 0.08);
  content: "";
}

.builder-grid-lines {
  position: absolute;
  inset: 35px 0 0 14px;
  opacity: 0.7;
  background-image: radial-gradient(#d9d9e5 0.7px, transparent 0.7px);
  background-size: 12px 12px;
}

.preview-node {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 31px 1fr;
  width: 145px;
  padding: 10px;
  border: 1px solid #dedee8;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(33, 30, 76, 0.07);
}

.preview-node i {
  display: grid;
  grid-row: 1 / 3;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 7px;
  color: var(--purple);
  background: #eeebff;
}

.preview-node i svg { width: 11px; height: 11px; }
.preview-node b { color: #44485b; font-size: 8px; }
.preview-node small { color: #a0a3b1; font-size: 6px; }
.preview-node-one { top: 68px; left: 34px; }
.preview-node-two { top: 150px; left: 92px; }
.preview-node-three { top: 235px; left: 43px; }
.preview-node-two i { color: #d27a3b; background: #fff0e3; }
.preview-node-three i { color: #25845f; background: #e6f8f0; }

.preview-connector {
  position: absolute;
  z-index: 1;
  width: 48px;
  height: 58px;
  border-right: 1.5px dashed #bdb8e9;
  border-bottom: 1.5px dashed #bdb8e9;
  border-radius: 0 0 10px 0;
}

.connector-one { top: 105px; left: 104px; }
.connector-two { top: 190px; left: 74px; transform: scaleX(-1); }

.cursor-badge {
  position: absolute;
  z-index: 4;
  top: 200px;
  left: 210px;
  padding: 4px 6px;
  border-radius: 5px 5px 5px 1px;
  color: #fff;
  background: var(--purple);
  font-size: 6px;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(109, 93, 251, 0.28);
}

.cursor-badge::before {
  position: absolute;
  top: -7px;
  left: -5px;
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-bottom: 10px solid var(--purple);
  content: "";
  transform: rotate(-20deg);
}

.feature-insights {
  grid-area: insights;
  min-height: 545px;
  padding: 34px;
}

.feature-dark {
  border-color: #20243b;
  color: #fff;
  background:
    radial-gradient(circle at 90% 12%, rgba(125, 105, 255, 0.2), transparent 32%),
    linear-gradient(160deg, #171a2d 0%, #0e1020 100%);
  box-shadow: 0 22px 60px rgba(13, 15, 31, 0.18);
}

.feature-dark:hover { border-color: #3a3d58; box-shadow: 0 25px 70px rgba(13, 15, 31, 0.24); }
.feature-dark h3 { max-width: 300px; color: #fff; font-size: 25px; }
.feature-dark p { max-width: 320px; color: #aeb1c2; }
.dark-icon { color: #c3bbff; background: rgba(133, 113, 255, 0.16); }

.insight-visual {
  position: absolute;
  right: 20px;
  bottom: 19px;
  left: 20px;
  min-height: 260px;
  padding: 24px 20px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.insight-top {
  display: flex;
  justify-content: space-between;
  color: #aeb1c2;
  font-size: 8px;
}

.insight-top em { color: #777c94; font-style: normal; }
.insight-visual > strong { display: block; margin-top: 12px; color: #fff; font-size: 26px; letter-spacing: -0.04em; }
.insight-visual > strong small { padding: 4px 6px; border-radius: 5px; color: #62d5a6; background: rgba(96, 215, 167, 0.1); font-size: 8px; vertical-align: middle; }
.insight-visual svg { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 150px; }
.chart-area { fill: url(#area); }
.chart-line { fill: none; stroke: #9f94ff; stroke-width: 2.2; vector-effect: non-scaling-stroke; }

.feature-rules {
  grid-area: rules;
  min-height: 195px;
  padding: 27px 290px 27px 30px;
}

.feature-rules h3 { margin-top: 15px; }
.rules-visual { position: absolute; top: 29px; right: 25px; width: 240px; }
.rules-visual > span { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 0 8px; padding: 10px; border: 1px solid #e2e2eb; border-radius: 10px; background: #fafafd; }
.rules-visual > span + span { margin-top: 9px; }
.rules-visual small { display: grid; grid-row: 1 / 3; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: #6958ec; background: #edeaff; font-size: 7px; font-weight: 850; }
.rules-visual > span:nth-child(2) small { color: #24845f; background: #e4f7ef; }
.rules-visual b,.rules-visual em,.rules-visual strong { font-size: 7px; line-height: 1.4; }
.rules-visual b { color: #45495c; }
.rules-visual em { color: #999dab; font-style: normal; }
.rules-visual strong { color: #5c4ce4; }

.feature-team {
  grid-area: team;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 237px;
  padding: 31px 0 28px 31px;
}

.team-visual { position: relative; min-height: 160px; margin-left: 16px; }
.avatar { position: absolute; display: grid; width: 42px; height: 42px; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 800; box-shadow: 0 5px 12px rgba(25, 24, 56, .1); }
.avatar-one { top: 3px; left: 25px; background: #7565e9; }
.avatar-two { top: 3px; left: 57px; background: #e99268; }
.avatar-three { top: 3px; left: 89px; background: #4ab18a; }
.avatar-four { top: 3px; left: 121px; color: #5b6073; background: #edeef3; }
.assignment-card { position: absolute; top: 61px; right: 20px; left: 10px; padding: 13px; border: 1px solid #e0e1ea; border-radius: 10px; background: #fff; box-shadow: 0 9px 28px rgba(36, 32, 81, .08); }
.assignment-card small { display:block; margin-bottom: 7px; color:#9ca0af; font-size:6px; font-weight:800; letter-spacing:.1em; }
.assignment-card strong { display:flex; align-items:center; gap:6px; color:#44485a; font-size:8px; }
.assignment-card .mini-avatar { position: static; width:20px; height:20px; border-width:1px; background:#7565e9; }
.assignment-card em { position:absolute; top:28px; right:12px; padding:3px 5px; border-radius:5px; color:#b86c36; background:#fff0e3; font-size:6px; font-style:normal; }

.feature-secure {
  grid-area: secure;
  min-height: 237px;
  padding: 31px;
  background: linear-gradient(145deg, #faf9ff, #fff);
}

.security-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:26px; }
.security-row span { display:inline-flex; align-items:center; gap:5px; padding:7px 9px; border:1px solid #e3e2ee; border-radius:7px; color:#686d80; background:#fff; font-size:7px; font-weight:700; }
.security-row svg { width:10px; height:10px; color:var(--purple); }

/* Workflow */
.workflow-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 15% 10%, rgba(109, 93, 251, 0.13), transparent 28%),
    radial-gradient(circle at 90% 90%, rgba(102, 82, 242, 0.12), transparent 32%),
    var(--navy-deep);
}

.workflow-section::before { position:absolute; inset:0; opacity:.13; background-image:radial-gradient(#a6a0d4 .7px,transparent .7px); background-size:22px 22px; content:""; mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent); }
.workflow-section .center-heading h2 { color:#fff; }
.workflow-section .center-heading h2 span { color:#a99eff; }

.workflow-showcase {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 555px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background: rgba(255,255,255,.04);
  box-shadow: 0 35px 80px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
}

.workflow-tabs {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 26px 18px;
  border-right: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.025);
}

.workflow-tabs button {
  display: grid;
  grid-template-columns: 31px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 15px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #a8aabb;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.workflow-tabs button > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  font-size: 8px;
  font-weight: 800;
}

.workflow-tabs button strong,.workflow-tabs button small { display:block; }
.workflow-tabs button strong { color:#e7e7ed; font-size:12px; }
.workflow-tabs button small { margin-top:1px; color:#737789; font-size:8px; }
.workflow-tabs button[aria-selected="true"] { border-color:rgba(144,128,255,.26); color:#fff; background:linear-gradient(135deg,rgba(109,93,251,.22),rgba(109,93,251,.08)); }
.workflow-tabs button[aria-selected="true"] > span { border-color:#7e6ef6; color:#fff; background:#6d5dfb; box-shadow:0 7px 18px rgba(109,93,251,.23); }
.workflow-tabs button[aria-selected="true"] strong { color:#fff; }

.workflow-panels { min-width:0; }
.workflow-panels > article { display:grid; grid-template-columns:.83fr 1.17fr; gap:45px; min-height:555px; align-items:center; padding:54px 46px; }
.panel-copy > span { color:#8e80f4; font-size:9px; font-weight:800; letter-spacing:.13em; }
.panel-copy h3 { margin:15px 0 17px; color:#fff; font-size:33px; line-height:1.14; letter-spacing:-.045em; }
.panel-copy p { margin:0; color:#aeb0c0; font-size:13px; line-height:1.75; }
.panel-copy ul,.price-card ul { padding:0; margin:24px 0 0; list-style:none; }
.panel-copy li,.price-card li { display:flex; align-items:center; gap:9px; margin-top:11px; color:#d9d9e3; font-size:11px; }
.list-check { display:grid; width:18px; height:18px; flex:0 0 auto; place-items:center; border-radius:50%; color:#9d90ff; background:rgba(109,93,251,.15); }
.list-check svg { width:10px; height:10px; stroke-width:2.5; }

.panel-ui { position:relative; min-height:380px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:17px; background:rgba(255,255,255,.055); box-shadow:0 25px 55px rgba(0,0,0,.18); }
.discover-ui { padding:22px; }
.ui-toolbar { display:flex; align-items:center; justify-content:space-between; color:#fff; font-size:10px; font-weight:700; }
.ui-toolbar i { min-width:130px; padding:8px 11px; border:1px solid rgba(255,255,255,.09); border-radius:8px; color:#777b8e; background:rgba(255,255,255,.035); font-size:7px; font-style:normal; font-weight:500; }
.blueprint-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.blueprint-grid > span { display:grid; grid-template-columns:35px 1fr; align-items:center; padding:15px 12px; border:1px solid rgba(255,255,255,.1); border-radius:11px; color:#b8bac8; background:rgba(255,255,255,.035); }
.blueprint-grid > span svg { grid-row:1/3; width:18px; height:18px; color:#8b7cf4; }
.blueprint-grid b { color:#ececf1; font-size:9px; }
.blueprint-grid small { color:#777b8e; font-size:7px; }
.blueprint-grid > span.selected { border-color:#7464e8; background:rgba(109,93,251,.16); box-shadow:0 0 0 1px rgba(109,93,251,.15); }
.discover-ui::after { position:absolute; right:32px; bottom:23px; left:32px; height:116px; border:1px solid rgba(255,255,255,.08); border-radius:11px; background:linear-gradient(135deg,rgba(109,93,251,.12),rgba(255,255,255,.02)); content:"Recent: Customer kickoff · Updated 4m ago"; display:flex; align-items:flex-start; padding:15px; color:#8c90a2; font-size:8px; }

.design-ui { display:flex; align-items:center; flex-direction:column; padding:37px 28px; background-image:radial-gradient(rgba(255,255,255,.13) .7px,transparent .7px); background-size:13px 13px; }
.design-node { position:relative; z-index:2; display:grid; grid-template-columns:35px 1fr; width:190px; align-items:center; gap:8px; padding:11px; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:#181a2b; box-shadow:0 8px 22px rgba(0,0,0,.22); }
.design-node i { display:grid; grid-row:1/3; width:31px; height:31px; place-items:center; border-radius:8px; color:#9f93ff; background:rgba(109,93,251,.18); }
.design-node i svg { width:14px; height:14px; }
.design-node small,.design-node b { display:block; }
.design-node small { color:#777b8e; font-size:6px; font-weight:800; letter-spacing:.1em; }
.design-node b { color:#ebebf0; font-size:9px; }
.design-node.active { border-color:#7464e8; }
.design-node.active i { color:#ffb582; background:rgba(255,155,104,.14); }
.design-line { width:1px; height:36px; border-left:1.5px dashed #5c587d; }
.branch-lines { position:relative; width:210px; height:48px; border-top:1.5px dashed #5c587d; }
.branch-lines::before { position:absolute; top:-49px; left:50%; height:49px; border-left:1.5px dashed #5c587d; content:""; }
.branch-lines i { position:absolute; top:0; height:48px; border-left:1.5px dashed #5c587d; }
.branch-lines i:first-child { left:0; }.branch-lines i:last-child { right:0; }
.branch-nodes { display:flex; width:300px; justify-content:space-between; margin-top:-2px; }
.branch-nodes span { width:135px; padding:12px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#181a2b; text-align:center; }
.branch-nodes small,.branch-nodes b { display:block; }
.branch-nodes small { color:#777b8e; font-size:6px; }.branch-nodes b { margin-top:2px; color:#e7e7ed; font-size:8px; }

.launch-ui { padding:38px; text-align:center; }
.launch-ring { display:grid; width:82px; height:82px; place-items:center; margin:0 auto; border:1px solid rgba(96,215,167,.25); border-radius:50%; background:rgba(96,215,167,.06); box-shadow:0 0 0 12px rgba(96,215,167,.035); }
.launch-ring span { display:grid; width:46px; height:46px; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#68d7aa,#3aa97d); box-shadow:0 10px 24px rgba(57,174,126,.22); }
.launch-ring svg { width:21px; height:21px; stroke-width:2.6; }
.launch-ui h4 { margin:22px 0 2px; color:#fff; font-size:20px; letter-spacing:-.03em; }
.launch-ui > p { margin:0; color:#777b8e; font-size:9px; }
.launch-checks { display:grid; gap:7px; margin:23px 0 20px; text-align:left; }
.launch-checks span { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:7px; color:#b5b7c5; background:rgba(255,255,255,.025); font-size:8px; }
.launch-checks svg { width:11px; height:11px; color:#5fd3a4; }
.launch-ui button { display:inline-flex; align-items:center; gap:8px; min-height:37px; padding:0 15px; border:0; border-radius:9px; color:#fff; background:var(--purple); font-size:9px; font-weight:750; }

.improve-ui { padding:27px; }
.improve-head { display:flex; align-items:flex-end; justify-content:space-between; }
.improve-head small,.improve-head b { display:block; }.improve-head small { color:#777b8e; font-size:7px; letter-spacing:.08em; }.improve-head b { margin-top:3px; color:#fff; font-size:26px; letter-spacing:-.04em; }
.improve-head em { padding:5px 7px; border-radius:6px; color:#61d5a6; background:rgba(96,215,167,.09); font-size:8px; font-style:normal; font-weight:800; }
.improve-chart { position:relative; height:210px; margin-top:19px; border-bottom:1px solid rgba(255,255,255,.09); background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 52px); }
.improve-chart svg { width:100%; height:100%; }.improve-chart path { fill:none; stroke:#8e80f4; stroke-width:3; vector-effect:non-scaling-stroke; }
.chart-point { position:absolute; width:8px; height:8px; border:2px solid #b9b0ff; border-radius:50%; background:#151728; box-shadow:0 0 0 5px rgba(109,93,251,.12); }.point-one { top:86px; left:45%; }.point-two { top:31px; left:85%; }
.improve-labels { display:flex; justify-content:space-between; margin-top:9px; color:#666a7e; font-size:7px; }

/* Solutions */
.solutions { background:#fff; }
.solution-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.solution-card { position:relative; min-height:465px; padding:35px 31px; overflow:hidden; border:1px solid #e3e4ec; border-radius:var(--radius-md); background:#fff; transition:transform 220ms ease,box-shadow 220ms ease,border-color 220ms ease; }
.solution-card:hover { border-color:#d4d0f1; box-shadow:0 18px 50px rgba(31,28,72,.09); transform:translateY(-5px); }
.solution-number { position:absolute; top:25px; right:27px; color:#c9cbd5; font-size:10px; font-weight:800; letter-spacing:.12em; }
.solution-icon { display:grid; width:48px; height:48px; place-items:center; border-radius:13px; color:var(--purple); background:var(--surface-purple); }
.solution-icon svg { width:21px; height:21px; }
.solution-card h3 { margin:28px 0 11px; color:var(--ink); font-size:23px; letter-spacing:-.035em; }
.solution-card p { margin:0; color:var(--ink-soft); font-size:13px; line-height:1.72; }
.solution-card ul { padding:21px 0 0; margin:24px 0 0; border-top:1px solid #ebebf1; list-style:none; }
.solution-card li { position:relative; margin-top:10px; padding-left:17px; color:#666b7e; font-size:11px; }
.solution-card li::before { position:absolute; top:8px; left:0; width:5px; height:5px; border-radius:50%; background:#8a7af4; content:""; }
.featured-solution { border-color:#d9d4ff; background:linear-gradient(155deg,#f9f8ff,#fff 58%); box-shadow:0 18px 45px rgba(71,56,160,.08); }

/* Integrations */
.integrations { position:relative; overflow:hidden; padding:125px 0; border-top:1px solid #e7e7ef; border-bottom:1px solid #e7e7ef; background:linear-gradient(145deg,#f7f6fc 0%,#fff 56%,#f5f3ff 100%); }
.integrations::before { position:absolute; inset:0; opacity:.5; background-image:radial-gradient(#d9d6ee .75px,transparent .75px); background-size:18px 18px; content:""; mask-image:linear-gradient(90deg,transparent,#000 65%,#000); }
.integrations-inner { position:relative; z-index:2; display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; align-items:center; }
.integration-copy h2 { max-width:550px; }
.integration-copy p { max-width:470px; margin:22px 0 29px; color:var(--ink-soft); font-size:15px; line-height:1.75; }
.integration-orbit { position:relative; min-height:480px; }
.orbit-ring { position:absolute; top:50%; left:50%; border:1px dashed #cec9ed; border-radius:50%; transform:translate(-50%,-50%); }
.orbit-ring-one { width:270px; height:270px; }.orbit-ring-two { width:445px; height:445px; opacity:.7; }
.orbit-center { position:absolute; z-index:3; top:50%; left:50%; display:flex; width:132px; height:132px; align-items:center; justify-content:center; flex-direction:column; gap:10px; border:1px solid #dedbea; border-radius:29px; background:rgba(255,255,255,.95); box-shadow:0 22px 55px rgba(47,37,113,.15); transform:translate(-50%,-50%) rotate(-3deg); }
.orbit-center .logo-mark { width:45px; height:45px; border-radius:14px; }.orbit-center strong { font-size:13px; letter-spacing:-.02em; }
.integration-chip { position:absolute; z-index:4; display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid #dfdee9; border-radius:11px; background:rgba(255,255,255,.95); box-shadow:0 12px 30px rgba(42,34,96,.1); animation:orbitFloat 5s ease-in-out infinite; }
.integration-chip i { display:grid; width:25px; height:25px; place-items:center; border-radius:7px; color:#fff; background:#6555ec; font-size:11px; font-style:normal; font-weight:800; }.integration-chip b { color:#4d5264; font-size:8px; }
.chip-slack { top:4%; left:43%; }.chip-slack i { background:#412442; }
.chip-hubspot { top:27%; right:3%; animation-delay:.6s; }.chip-hubspot i { background:#ff7a59; }
.chip-notion { right:11%; bottom:13%; animation-delay:1.2s; }.chip-notion i { color:#fff; background:#181818; }
.chip-salesforce { bottom:1%; left:35%; animation-delay:1.8s; }.chip-salesforce i { background:#1798d5; }
.chip-stripe { bottom:20%; left:3%; animation-delay:2.4s; }.chip-stripe i { background:#635bff; }
.chip-linear { top:23%; left:5%; animation-delay:3s; }.chip-linear i { background:#292a42; }

/* Outcomes */
.outcomes { position:relative; overflow:hidden; padding:126px 0 108px; color:#fff; background:linear-gradient(145deg,#121529,#090b18 68%); }
.outcomes::after { position:absolute; top:-230px; right:-130px; width:520px; height:520px; border:1px solid rgba(139,124,246,.16); border-radius:50%; box-shadow:0 0 0 80px rgba(139,124,246,.025),0 0 0 160px rgba(139,124,246,.018); content:""; }
.outcome-noise { position:absolute; inset:0; opacity:.18; background-image:radial-gradient(rgba(255,255,255,.16) .6px,transparent .6px); background-size:19px 19px; mask-image:linear-gradient(90deg,#000,transparent 55%); }
.outcomes .container { position:relative; z-index:2; }
.outcomes-heading { display:grid; grid-template-columns:1fr .7fr; align-items:end; gap:80px; }
.outcomes-heading h2 { color:#fff; }.outcomes-heading h2 span { color:#a99eff; }
.outcomes-heading p { margin:0 0 6px; color:#aeb1c1; font-size:14px; line-height:1.75; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:73px; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
.stats-grid > div { padding:34px 28px 32px; border-right:1px solid rgba(255,255,255,.12); }.stats-grid > div:first-child { padding-left:0; }.stats-grid > div:last-child { border-right:0; }
.stats-grid strong { display:block; color:#fff; font-size:47px; line-height:1; letter-spacing:-.055em; }.stats-grid strong em { color:#8d7efa; font-size:26px; font-style:normal; }
.stats-grid p { margin:11px 0 0; color:#9ca0b2; font-size:10px; }
.metrics-note { margin:15px 0 0; color:#676b80; font-size:9px; text-align:right; }

/* Testimonials */
.testimonials { background:#f8f8fb; }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.quote-card { position:relative; min-height:372px; padding:31px; border:1px solid #e1e2ea; border-radius:var(--radius-md); background:#fff; box-shadow:0 9px 30px rgba(31,28,72,.045); }
.quote-card::after { position:absolute; right:30px; bottom:95px; left:30px; height:1px; background:#ececf1; content:""; }
.quote-mark { color:#8a7af4; font-family:Georgia,serif; font-size:52px; line-height:.8; }
.quote-card blockquote { margin:25px 0 0; color:#303448; font-size:15px; font-weight:520; line-height:1.75; letter-spacing:-.012em; }
.quote-author { position:absolute; right:31px; bottom:29px; left:31px; display:flex; align-items:center; gap:11px; }
.quote-avatar { display:grid; width:39px; height:39px; flex:0 0 auto; place-items:center; border-radius:12px; color:#fff; font-size:9px; font-weight:800; }.avatar-purple { background:linear-gradient(135deg,#7565e9,#9a7cf0); }.avatar-mint { background:linear-gradient(135deg,#3fab82,#69d4aa); }.avatar-orange { background:linear-gradient(135deg,#e68156,#f0ad83); }
.quote-author strong,.quote-author small { display:block; }.quote-author strong { color:#3a3e51; font-size:10px; }.quote-author small { margin-top:1px; color:#979baa; font-size:8px; }
.quote-featured { border-color:#d8d3fb; background:linear-gradient(155deg,#f7f5ff,#fff 58%); transform:translateY(-13px); box-shadow:0 18px 46px rgba(69,55,153,.09); }

/* Pricing */
.pricing { background:#fff; }
.pricing-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:60px; }
.billing-toggle { display:flex; gap:4px; padding:4px; border:1px solid #e1e1ea; border-radius:12px; background:#f8f8fb; }
.billing-toggle button { min-height:37px; padding:0 12px; border:0; border-radius:8px; color:#73788a; background:transparent; font-size:10px; font-weight:700; cursor:pointer; transition:color 180ms ease,background 180ms ease,box-shadow 180ms ease; }
.billing-toggle button span { margin-left:4px; color:#4a9d78; font-size:7px; }
.billing-toggle button[aria-pressed="true"] { color:#313548; background:#fff; box-shadow:0 4px 12px rgba(30,28,68,.08); }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.price-card { position:relative; padding:31px 29px 33px; border:1px solid #e1e2e9; border-radius:var(--radius-md); background:#fff; transition:transform 220ms ease,box-shadow 220ms ease; }
.price-card:hover { box-shadow:0 18px 50px rgba(35,31,78,.1); transform:translateY(-4px); }
.price-top { min-height:145px; }
.plan-icon { display:grid; width:40px; height:40px; place-items:center; border-radius:11px; }.plan-icon svg { width:18px; height:18px; }.starter-icon { color:#654fea; background:#eeebff; }.growth-icon { color:#257c5b; background:#e4f7ef; }.scale-icon { color:#c76d32; background:#fff0e3; }
.price-card h3 { margin:18px 0 6px; color:var(--ink); font-size:20px; letter-spacing:-.03em; }
.price-card .price-top p { margin:0; color:var(--ink-soft); font-size:11px; line-height:1.65; }
.plan-price { display:flex; min-height:59px; align-items:flex-start; margin:20px 0 19px; color:var(--ink); }
.plan-price > span { margin:7px 3px 0 0; font-size:16px; font-weight:750; }.plan-price strong { font-size:45px; line-height:1; letter-spacing:-.055em; }.plan-price em { align-self:flex-end; margin:0 0 5px 7px; color:#8c90a0; font-size:9px; font-style:normal; }
.custom-price { align-items:center; }.custom-price strong { font-size:35px; }
.price-button { width:100%; }
.plan-divider { height:1px; margin:27px 0 22px; background:#ebebf0; }
.price-card h4 { margin:0; color:#484c5e; font-size:9px; }
.price-card li { color:#64697c; font-size:10px; }.price-card .list-check { color:#6757ed; background:#efecff; }
.popular-card { border-color:#7c6cf3; box-shadow:0 19px 50px rgba(82,66,180,.12); }
.popular-label { position:absolute; top:17px; right:17px; padding:6px 8px; border-radius:6px; color:#5545de; background:#eeebff; font-size:7px; font-weight:850; letter-spacing:.08em; }
.pricing-note { margin:18px 0 0; color:#a0a4b1; font-size:9px; text-align:center; }

/* FAQ */
.faq { border-top:1px solid #ececf1; background:#fafafd; }
.faq-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:105px; align-items:start; }
.faq-intro { position:sticky; top:120px; }
.faq-intro h2 { font-size:52px; }.faq-intro p { margin:20px 0 0; color:var(--ink-soft); font-size:14px; }
.faq-list { border-top:1px solid #dedfe7; }
.faq-list details { border-bottom:1px solid #dedfe7; }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 0; color:#303447; font-size:14px; font-weight:700; cursor:pointer; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { display:grid; width:29px; height:29px; flex:0 0 auto; place-items:center; border:1px solid #e0e1e9; border-radius:8px; color:#6555e8; background:#fff; transition:transform 180ms ease,background 180ms ease; }
.faq-list summary svg { width:13px; height:13px; }
.faq-list details[open] summary span { color:#fff; background:var(--purple); transform:rotate(45deg); }
.faq-list details p { max-width:650px; margin:-8px 60px 25px 0; color:var(--ink-soft); font-size:12px; line-height:1.75; }

/* CTA */
.final-cta { position:relative; overflow:hidden; padding:123px 0 117px; color:#fff; background:linear-gradient(135deg,#725fff 0%,#5b48e4 52%,#4634cb 100%); }
.final-cta::before { position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:60px 60px; content:""; mask-image:radial-gradient(circle,#000,transparent 72%); }
.cta-orbit { position:absolute; border:1px solid rgba(255,255,255,.17); border-radius:50%; }.cta-orbit-one { top:-260px; left:-180px; width:600px; height:600px; box-shadow:0 0 0 80px rgba(255,255,255,.02),0 0 0 160px rgba(255,255,255,.015); }.cta-orbit-two { right:-190px; bottom:-310px; width:650px; height:650px; box-shadow:0 0 0 90px rgba(255,255,255,.018); }
.cta-dot { position:absolute; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 7px rgba(255,255,255,.1); }.dot-one { top:26%; left:14%; }.dot-two { right:14%; bottom:24%; }
.final-cta-inner { position:relative; z-index:2; text-align:center; }
.final-cta .section-kicker { color:#d7d1ff; }
.final-cta h2 { margin:20px 0 20px; color:#fff; font-size:clamp(51px,5.3vw,72px); font-weight:750; line-height:1; letter-spacing:-.06em; }.final-cta h2 span { color:#fff; opacity:.68; }
.final-cta p { max-width:570px; margin:0 auto; color:#dedaff; font-size:16px; }
.cta-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:11px; margin-top:31px; }
.cta-note { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:20px; color:#cdc7fa; font-size:9px; }.cta-note svg { width:12px; height:12px; }

/* Footer */
.site-footer { color:#fff; background:#090b16; }
.footer-main { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:70px; padding-top:72px; padding-bottom:65px; }
.brand-light { color:#fff; }.footer-brand p { margin:14px 0 0; color:#74788c; font-size:11px; }
.footer-main nav { display:flex; align-items:flex-start; flex-direction:column; gap:10px; }
.footer-main nav strong { margin-bottom:5px; color:#e9e9ef; font-size:10px; }.footer-main nav a { color:#777b8f; font-size:10px; transition:color 160ms ease,transform 160ms ease; }.footer-main nav a:hover { color:#c7c9d4; transform:translateX(2px); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:20px; padding-bottom:24px; border-top:1px solid rgba(255,255,255,.1); color:#5f6376; }
.footer-bottom small { font-size:8px; letter-spacing:.025em; }.footer-bottom a { display:inline-flex; align-items:center; gap:7px; font-size:8px; }.footer-bottom a span { color:#9d91f8; font-size:12px; }

/* Motion */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 720ms cubic-bezier(.2,.72,.2,1), transform 720ms cubic-bezier(.2,.72,.2,1);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal-delay { transition-delay: 120ms; }

@keyframes flowPulse {
  0%, 18%, 100% { opacity: .18; transform: translateY(-4px) scale(.8); }
  42%, 65% { opacity: 1; transform: translateY(4px) scale(1); }
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes orbitFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(1deg); }
}

/* Responsive */
@media (max-width: 1160px) {
  .hero-grid { grid-template-columns: .84fr 1.16fr; gap: 30px; }
  .hero h1 { font-size: 59px; }
  .dashboard-inspector { display:none; }
  .dashboard-layout { grid-template-columns:50px 1fr; }
  .floating-saved { right:-4px; }
  .feature-rules { padding-right:255px; }
  .rules-visual { width:215px; }
  .workflow-panels > article { gap:30px; padding:45px 34px; }
  .panel-copy h3 { font-size:29px; }
  .integrations-inner { gap:45px; }
}

@media (max-width: 980px) {
  .section { padding:105px 0; }
  .desktop-nav { margin-left:36px; gap:21px; }
  .nav-login { display:none; }
  .hero { min-height:auto; padding-top:135px; }
  .hero-grid { grid-template-columns:1fr; gap:24px; }
  .hero-copy { max-width:720px; text-align:center; margin:0 auto; }
  .hero h1 { max-width:760px; font-size:68px; }
  .hero-lead { margin-inline:auto; }
  .hero-actions,.hero-proof { justify-content:center; }
  .hero-product { width:min(100%,760px); margin:20px auto 0; padding-left:0; }
  .role-lockups { grid-template-columns:repeat(3,auto); justify-content:center; gap:24px 50px; }
  .section-heading { grid-template-columns:1fr; gap:22px; }
  .section-heading > p { max-width:640px; }
  .bento-grid { grid-template-columns:1fr; grid-template-areas:"builder" "insights" "rules" "team" "secure"; }
  .feature-insights { min-height:510px; }
  .feature-rules { min-height:220px; }
  .feature-team,.feature-secure { min-height:250px; }
  .workflow-showcase { grid-template-columns:1fr; }
  .workflow-tabs { display:grid; grid-template-columns:repeat(4,1fr); padding:14px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .workflow-tabs button { grid-template-columns:26px 1fr; padding:10px 8px; }.workflow-tabs button > span { width:26px; height:26px; }.workflow-tabs button small { display:none; }
  .workflow-panels > article { min-height:500px; }
  .solution-grid { grid-template-columns:1fr 1fr; }.solution-card:last-child { grid-column:1/-1; min-height:390px; }
  .integrations-inner { grid-template-columns:1fr; }.integration-copy { max-width:650px; }.integration-orbit { width:min(100%,650px); margin-inline:auto; }
  .outcomes-heading { grid-template-columns:1fr; gap:24px; }.outcomes-heading p { max-width:600px; }
  .stats-grid { grid-template-columns:1fr 1fr; }.stats-grid > div { border-bottom:1px solid rgba(255,255,255,.12); }.stats-grid > div:nth-child(2) { border-right:0; }.stats-grid > div:first-child { padding-left:28px; }
  .testimonial-grid { grid-template-columns:1fr; max-width:700px; margin-inline:auto; }.quote-card { min-height:300px; }.quote-featured { transform:none; }
  .pricing-grid { grid-template-columns:1fr; max-width:690px; margin-inline:auto; }.price-top { min-height:0; }.price-card { padding:34px; }.price-card .price-top p { max-width:450px; }
  .faq-grid { grid-template-columns:1fr; gap:50px; }.faq-intro { position:static; max-width:650px; }
}

@media (max-width: 760px) {
  .container,.nav-shell { width:min(calc(100% - 32px),var(--container)); }
  .section { padding:88px 0; }
  .nav-shell { height:70px; }
  .desktop-nav,.nav-actions { display:none; }
  .menu-toggle { display:flex; width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:6px; margin-left:auto; border:1px solid #e1e2e9; border-radius:11px; background:rgba(255,255,255,.82); cursor:pointer; }
  .menu-toggle span { width:18px; height:1.5px; border-radius:2px; background:var(--ink); transition:transform 180ms ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.8px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.8px) rotate(-45deg); }
  .mobile-menu { display:block; max-height:0; overflow:hidden; opacity:0; background:rgba(255,255,255,.96); transition:max-height 280ms ease,opacity 180ms ease; }
  .mobile-menu[hidden] { display:block!important; }
  .mobile-menu.is-open { max-height:480px; opacity:1; border-top:1px solid #e8e8ef; }
  .mobile-menu nav { display:flex; align-items:stretch; flex-direction:column; gap:3px; width:calc(100% - 32px); padding:13px 0 21px; margin-inline:auto; }
  .mobile-menu a:not(.button) { padding:10px 7px; color:#4e5367; font-size:14px; font-weight:650; }
  .mobile-menu .button { margin-top:7px; }
  .hero { padding:122px 0 72px; }
  .hero::before { background-size:44px 44px; }
  .hero h1 { margin-top:22px; font-size:clamp(47px,13.8vw,64px); }
  .hero-lead { font-size:16px; }
  .hero-proof { gap:10px 15px; }
  .hero-product { padding-top:30px; }
  .dashboard-window { transform:none; border-radius:15px; }
  .dashboard-topbar { grid-template-columns:50px 1fr auto; padding-inline:11px; }.dashboard-breadcrumb span { display:none; }
  .dashboard-layout { grid-template-columns:1fr; min-height:400px; }.dashboard-sidebar { display:none; }.workflow-canvas { padding:17px 13px; }.flow-stage { margin-top:22px; }.floating-saved { top:3px; right:-7px; transform:scale(.88); transform-origin:right top; animation:none; }.floating-run { right:12px; bottom:-3px; animation:none; }
  .team-strip-inner { overflow:hidden; }.role-lockups { display:flex; width:max-content; gap:34px; animation:marquee 22s linear infinite; }.role-lockups::after { content:"OPERATIONS   ·   REVOPS   ·   FINANCE"; color:#777b8d; font-size:11px; font-weight:780; letter-spacing:.05em; white-space:pre; }
  .section-heading h2,.center-heading h2,.integration-copy h2,.outcomes-heading h2,.pricing-head h2,.faq-intro h2 { font-size:clamp(39px,11vw,52px); }
  .section-heading { margin-bottom:43px; }
  .feature-builder { grid-template-columns:1fr; min-height:540px; }.feature-builder .feature-copy { padding:29px 29px 10px; }.builder-preview { min-height:320px; }.preview-node-one { left:17%; }.preview-node-two { left:36%; }.preview-node-three { left:20%; }.cursor-badge { left:68%; }
  .feature-insights { min-height:500px; padding:29px; }
  .feature-rules { min-height:420px; padding:29px; }.rules-visual { top:auto; right:24px; bottom:28px; left:24px; width:auto; }
  .feature-team { grid-template-columns:1fr; min-height:425px; padding:29px; }.team-visual { min-height:190px; margin:28px 0 0; }.feature-secure { padding:29px; }
  .center-heading { margin-bottom:43px; }
  .workflow-showcase { border-radius:18px; }
  .workflow-tabs { grid-template-columns:1fr 1fr; }.workflow-tabs button { grid-template-columns:26px 1fr; }.workflow-tabs button small { display:block; }
  .workflow-panels > article { grid-template-columns:1fr; min-height:auto; gap:35px; padding:35px 22px; }.panel-copy h3 { font-size:28px; }.panel-ui { min-height:355px; }
  .solution-grid { grid-template-columns:1fr; }.solution-card,.solution-card:last-child { grid-column:auto; min-height:420px; }
  .integrations { padding:91px 0; }.integration-orbit { min-height:450px; transform:scale(.9); }.orbit-ring-two { width:400px; height:400px; }
  .outcomes { padding:94px 0 85px; }.stats-grid { margin-top:50px; }.stats-grid > div { padding:26px 18px!important; }.stats-grid strong { font-size:39px; }
  .pricing-head { align-items:flex-start; flex-direction:column; margin-bottom:43px; }
  .faq-list summary { padding:22px 0; font-size:13px; }.faq-list details p { margin-right:20px; }
  .final-cta { padding:93px 0 88px; }.final-cta h2 { font-size:clamp(45px,12.5vw,62px); }.final-cta p { font-size:14px; }
  .footer-main { grid-template-columns:1fr 1fr; gap:43px 28px; }.footer-brand { grid-column:1/-1; }.footer-bottom { gap:15px; }
}

@media (max-width: 480px) {
  .container,.nav-shell { width:min(calc(100% - 28px),var(--container)); }
  .brand { font-size:18px; }.logo-mark { width:32px; height:32px; }
  .hero-actions .button { width:100%; }.hero-proof { font-size:10px; }.hero-product { margin-top:8px; }
  .flow-stage { max-width:240px; }.flow-node { grid-template-columns:34px 1fr 17px; }.floating-saved { min-width:195px; }.floating-run { right:4px; min-width:205px; }
  .feature-card h3 { font-size:20px; }.preview-node-one { left:8%; }.preview-node-two { left:31%; }.preview-node-three { left:13%; }.cursor-badge { left:72%; }
  .workflow-tabs button small { display:none; }
  .blueprint-grid { grid-template-columns:1fr; }.blueprint-grid > span:nth-child(n+3) { display:none; }.discover-ui::after { height:92px; }
  .design-ui { padding-inline:12px; }.branch-nodes { width:270px; }.branch-nodes span { width:126px; }
  .integration-orbit { min-height:400px; transform:scale(.75); margin:-40px -60px; width:calc(100% + 120px); }.orbit-ring-two { width:430px; height:430px; }
  .stats-grid { grid-template-columns:1fr; }.stats-grid > div { border-right:0; }.stats-grid strong { font-size:44px; }
  .price-card { padding:28px 23px; }.popular-label { top:13px; right:13px; }
  .cta-actions .button { width:100%; }.cta-note { font-size:8px; }
  .footer-main { grid-template-columns:1fr 1fr; }.footer-main nav:last-child { display:none; }.footer-bottom { align-items:flex-start; flex-direction:column; }
}

@keyframes marquee {
  to { transform: translateX(calc(-50% - 17px)); }
}

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

.error-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 28px;
  background: radial-gradient(circle at 70% 15%, rgba(109, 93, 251, 0.14), transparent 35%), #faf9ff;
}

.error-page main {
  width: min(100%, 650px);
  text-align: center;
}

.error-page .brand {
  justify-content: center;
  margin-bottom: 64px;
}

.error-page p {
  margin: 0;
  color: var(--purple);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.error-page h1 {
  margin: 17px 0 15px;
  color: var(--ink);
  font-size: clamp(44px, 8vw, 68px);
  line-height: 1;
  letter-spacing: -.055em;
}

.error-page main > span {
  display: block;
  margin-bottom: 28px;
  color: var(--ink-soft);
}