:root {
  --ink: #09111f;
  --ink-soft: #14213a;
  --muted: #5f6f8d;
  --muted-2: #8795af;
  --line: #dfe7f4;
  --line-strong: #cbd9ef;
  --paper: #ffffff;
  --paper-blue: #f4f7ff;
  --paper-blue-2: #edf4ff;
  --blue: #246ff2;
  --blue-dark: #1555cf;
  --blue-light: #dce9ff;
  --green: #16a765;
  --amber: #bc7200;
  --night: #08111f;
  --night-2: #0c1729;
  --shadow-sm: 0 8px 24px rgba(24, 63, 122, 0.08);
  --shadow-md: 0 22px 70px rgba(25, 64, 126, 0.13);
  --shadow-blue: 0 16px 42px rgba(36, 111, 242, 0.28);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;
  --container: 1280px;
  --header-height: 76px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

button,
textarea,
input {
  font: inherit;
}

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

button {
  color: inherit;
}

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

img,
svg {
  display: block;
}

svg {
  width: 1em;
  height: 1em;
}

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

h1,
h2,
h3 {
  line-height: 1.08;
  letter-spacing: -0.045em;
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 620;
}

h3 {
  letter-spacing: -0.025em;
}

button:focus-visible,
a:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(36, 111, 242, 0.34);
  outline-offset: 3px;
}

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

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

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

.svg-sprite {
  position: absolute;
  pointer-events: none;
}

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

.section {
  position: relative;
  padding: 122px 0;
}

.section-grid,
.section-grid-soft,
.section-grid-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section-grid::before,
.section-grid-soft::before,
.section-grid-dark::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(102, 143, 218, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 143, 218, 0.13) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 58%, transparent 100%);
}

.section-grid-soft::before {
  opacity: 0.48;
  background-size: 112px 112px;
}

.section-grid-dark::before {
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(112, 159, 255, 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 159, 255, 0.34) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

.reveal-delay-1 {
  transition-delay: 90ms !important;
}

.reveal-delay-2 {
  transition-delay: 180ms !important;
}

.reveal-delay-3 {
  transition-delay: 270ms !important;
}

.reveal-delay-4 {
  transition-delay: 360ms !important;
}

/* Header */
.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-height);
  border-bottom: 1px solid rgba(209, 220, 239, 0.68);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(1.4);
  transition: box-shadow 180ms ease, background 180ms ease;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 34px rgba(12, 31, 65, 0.08);
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-word {
  font-size: 25px;
  font-weight: 720;
  letter-spacing: -0.055em;
}

.brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 39px;
  height: 36px;
  color: var(--blue);
}

.brand-face {
  position: relative;
  display: block;
  width: 27px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 7px;
  background: #fff;
}

.brand-face::before,
.brand-face::after {
  position: absolute;
  top: 8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.brand-face::before {
  left: 6px;
}

.brand-face::after {
  right: 6px;
}

.brand-face i,
.brand-face b {
  position: absolute;
  display: block;
}

.brand-face i:first-child {
  top: 4px;
  left: -5px;
  width: 4px;
  height: 12px;
  border: 2px solid currentColor;
  border-right: 0;
  border-radius: 4px 0 0 4px;
}

.brand-face i:nth-child(2) {
  top: 4px;
  right: -5px;
  width: 4px;
  height: 12px;
  border: 2px solid currentColor;
  border-left: 0;
  border-radius: 0 4px 4px 0;
}

.brand-face b {
  right: 6px;
  bottom: 4px;
  left: 6px;
  height: 2px;
  border-radius: 3px;
  background: currentColor;
}

.brand-antenna {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 12px;
  width: 2px;
  height: 7px;
  background: currentColor;
}

.brand-antenna::before {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.brand-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}

.brand-bars i {
  display: block;
  width: 3px;
  border-radius: 4px;
  background: currentColor;
}

.brand-bars i:nth-child(1) {
  height: 13px;
}

.brand-bars i:nth-child(2) {
  height: 23px;
}

.brand-bars i:nth-child(3) {
  height: 31px;
}

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

.desktop-nav a,
.nav-signin {
  color: #33415c;
  font-size: 14px;
  font-weight: 560;
  transition: color 160ms ease;
}

.desktop-nav a:hover,
.nav-signin:hover {
  color: var(--blue);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 23px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.012em;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

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

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

.button-small {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
}

.button-dark {
  color: #fff;
  background: var(--ink);
  box-shadow: 0 8px 20px rgba(9, 17, 31, 0.12);
}

.button-dark:hover {
  background: #14213a;
  box-shadow: 0 12px 28px rgba(9, 17, 31, 0.18);
}

.button-primary {
  color: #fff;
  background: linear-gradient(135deg, #2878fa, #1f68ec);
  box-shadow: 0 10px 24px rgba(36, 111, 242, 0.27);
}

.button-primary:hover {
  background: linear-gradient(135deg, #1e70f4, #1459d9);
  box-shadow: var(--shadow-blue);
}

.button-secondary {
  border-color: var(--line-strong);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
}

.button-secondary:hover {
  border-color: #a9c0e4;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.menu-button svg {
  width: 21px;
  height: 21px;
}

.menu-close-icon {
  display: none;
}

.menu-button[aria-expanded="true"] .menu-open-icon {
  display: none;
}

.menu-button[aria-expanded="true"] .menu-close-icon {
  display: block;
}

.mobile-nav {
  visibility: hidden;
  position: fixed;
  z-index: 999;
  top: var(--header-height);
  right: 0;
  left: 0;
  max-height: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  opacity: 0;
  box-shadow: 0 24px 50px rgba(8, 24, 51, 0.1);
  transition: max-height 260ms ease, opacity 180ms ease, visibility 180ms ease;
}

.mobile-nav.open {
  visibility: visible;
  max-height: 520px;
  opacity: 1;
}

.mobile-nav-inner {
  display: grid;
  gap: 8px;
  padding-top: 18px;
  padding-bottom: 24px;
}

.mobile-nav-inner > a {
  padding: 12px 4px;
  border-bottom: 1px solid #edf1f8;
  font-weight: 600;
}

.mobile-nav-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
}

/* Hero */
.hero {
  min-height: 1120px;
  padding: calc(var(--header-height) + 86px) 0 96px;
  background:
    radial-gradient(circle at 21% 14%, rgba(173, 162, 255, 0.34), transparent 31%),
    radial-gradient(circle at 74% 14%, rgba(91, 171, 255, 0.38), transparent 35%),
    linear-gradient(180deg, #eff4ff 0%, #f5f8ff 48%, #fff 100%);
}

.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.55) 78%, #fff 100%);
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(75px);
  opacity: 0.48;
}

.hero-orb-one {
  top: 210px;
  left: -160px;
  width: 420px;
  height: 420px;
  background: #b5caff;
}

.hero-orb-two {
  top: 340px;
  right: -180px;
  width: 500px;
  height: 500px;
  background: #a6e1ff;
}

.hero-content {
  position: relative;
  text-align: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 27px;
  padding: 8px 15px;
  border: 1px solid rgba(195, 211, 239, 0.9);
  border-radius: 999px;
  color: #465675;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 26px rgba(56, 100, 175, 0.07);
  font-size: 13px;
  font-weight: 570;
  backdrop-filter: blur(10px);
}

.hero-eyebrow span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #63a3ff;
  box-shadow: 0 0 0 5px rgba(99, 163, 255, 0.11);
}

.hero-title {
  max-width: 1100px;
  margin: 0 auto 24px;
  font-size: clamp(3.2rem, 6.3vw, 6rem);
  font-weight: 620;
  line-height: 0.99;
  letter-spacing: -0.067em;
}

.hero-title span {
  display: block;
}

.hero-title-blue {
  margin-top: 10px;
  color: var(--blue);
}

.hero-title em {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.07em;
}

.hero-copy {
  max-width: 810px;
  margin: 0 auto 43px;
  color: #52617d;
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  line-height: 1.65;
}

.prompt-composer {
  position: relative;
  max-width: 790px;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid rgba(198, 216, 245, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 7px rgba(111, 161, 242, 0.12), 0 26px 64px rgba(46, 91, 166, 0.16);
  text-align: left;
  backdrop-filter: blur(12px);
}

.prompt-composer textarea {
  display: block;
  width: 100%;
  min-height: 94px;
  padding: 23px 25px 16px;
  resize: none;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 17px;
  line-height: 1.52;
  letter-spacing: -0.012em;
}

.prompt-composer textarea::placeholder {
  color: #91a0b9;
}

.composer-footer {
  display: flex;
  align-items: center;
  min-height: 66px;
  padding: 10px 13px 10px 20px;
  border-top: 1px solid #edf1f7;
}

.attach-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #52617b;
  background: #fff;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
}

.attach-button svg {
  width: 15px;
  height: 15px;
}

/* The homepage mic: an icon and a tooltip, nothing more. It records nothing;
   speaking a prompt needs a login, and the tooltip says so on hover, on
   keyboard focus, and (app.js) on a tap, since a phone has no hover. */
.mic-locked {
  position: relative;
  display: inline-flex;
  margin-left: 8px;
}

.mic-locked-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #52617b;
  background: #fff;
  cursor: pointer;
}

.mic-locked-button:hover,
.mic-locked-button:focus-visible {
  color: #1d4ed8;
  border-color: #bfd0f7;
}

.mic-locked-button svg {
  width: 16px;
  height: 16px;
}

.mic-locked-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: min(300px, 78vw);
  padding: 7px 10px;
  border-radius: 8px;
  color: #fff;
  background: #0f1b33;
  box-shadow: 0 10px 28px -12px rgba(8, 15, 35, 0.6);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.mic-locked-tip a {
  color: #9ec1ff;
  font-weight: 600;
  text-decoration: underline;
}

.mic-locked:hover .mic-locked-tip,
.mic-locked:focus-within .mic-locked-tip,
.mic-locked.is-open .mic-locked-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .mic-locked-tip {
    transition: none;
  }
}

.composer-note {
  margin-left: 12px;
  color: #8391aa;
  font-size: 12.5px;
}

.composer-submit {
  min-width: 174px;
  margin-left: auto;
}

.prompt-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 970px;
  margin: 42px auto 74px;
}

.prompt-suggestions > span {
  margin-right: 3px;
  color: #8290a9;
  font-size: 12px;
}

.prompt-suggestions button {
  padding: 8px 14px;
  border: 1px solid #d9e2f1;
  border-radius: 999px;
  color: #34425d;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font-size: 12px;
  font-weight: 580;
  box-shadow: 0 4px 10px rgba(42, 72, 121, 0.03);
  transition: transform 150ms ease, border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.prompt-suggestions button:hover {
  transform: translateY(-2px);
  border-color: #a9c5ef;
  color: var(--blue-dark);
  background: #fff;
}

.browser-window {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(209, 220, 238, 0.92);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 35px 100px rgba(45, 78, 132, 0.19);
  text-align: left;
}

.hero-product {
  max-width: 1180px;
  margin: 0 auto;
}

.browser-bar {
  display: grid;
  grid-template-columns: 90px auto 1fr;
  align-items: center;
  height: 49px;
  padding: 0 18px;
  border-bottom: 1px solid #e6edf7;
  background: #f7f9fc;
}

.browser-dots {
  display: flex;
  gap: 7px;
}

.browser-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dfe6f1;
}

.browser-address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 5px 12px;
  border: 1px solid #dce5f2;
  border-radius: 8px;
  color: #5d6d88;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.address-lock {
  color: var(--green);
  font-size: 8px;
}

.browser-live {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 7px;
  color: var(--green);
  font-size: 12px;
  font-weight: 650;
}

.browser-live span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(22, 167, 101, 0.09);
}

.crm-app {
  display: grid;
  grid-template-columns: 205px 1fr;
  min-height: 390px;
}

.crm-sidebar {
  padding: 25px 19px;
  border-right: 1px solid #e9eef7;
  background: #fbfcfe;
}

.crm-sidebar > strong {
  display: block;
  margin: 0 10px 21px;
  font-size: 13px;
}

.crm-sidebar nav {
  display: grid;
  gap: 5px;
}

.crm-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  color: #5c6a84;
  font-size: 12px;
  font-weight: 520;
}

.crm-sidebar a svg {
  width: 14px;
  height: 14px;
}

.crm-sidebar a.active {
  color: var(--blue);
  background: #eaf1ff;
  font-weight: 650;
}

.crm-main {
  padding: 25px 24px 30px;
  background: #fff;
}

.crm-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.crm-metrics article {
  min-width: 0;
  padding: 17px 16px;
  border: 1px solid #e0e8f4;
  border-radius: 10px;
  background: #fff;
}

.crm-metrics span {
  display: block;
  margin-bottom: 9px;
  color: #8a99b5;
  font-size: 10px;
}

.crm-metrics strong {
  font-size: 21px;
  font-weight: 620;
  letter-spacing: -0.04em;
}

.crm-table {
  overflow: hidden;
  border: 1px solid #e0e8f4;
  border-radius: 10px;
}

.crm-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr 0.88fr 0.78fr;
  min-height: 47px;
  border-top: 1px solid #e7edf6;
  color: #384660;
  font-size: 11.5px;
}

.crm-row:first-child {
  border-top: 0;
}

.crm-row > span {
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.crm-head {
  min-height: 43px;
  color: #8b9ab5;
  background: #f9fbfe;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-complete {
  color: var(--green);
}

.status-progress {
  color: var(--blue);
}

.status-scheduled {
  color: var(--amber);
}

.edit-toolbar {
  position: absolute;
  z-index: 5;
  bottom: 46px;
  left: 48%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(220, 228, 240, 0.92);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 34px rgba(30, 52, 88, 0.19);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.edit-toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #374157;
  background: #fff;
  font-size: 17px;
}

.edit-toolbar .toolbar-pointer {
  color: #fff;
  background: var(--blue);
}

.edit-toolbar .toolbar-edit {
  width: auto;
  min-width: 116px;
  padding: 0 17px;
  color: #fff;
  background: var(--blue);
  font-size: 13px;
}

.edit-toolbar span {
  width: 1px;
  height: 29px;
  background: var(--line);
}

.build-receipt {
  display: flex;
  align-items: center;
  gap: 25px;
  min-height: 50px;
  padding: 0 20px;
  overflow: hidden;
  color: #c4cede;
  background: #0a1424;
  font-size: 10.5px;
  white-space: nowrap;
}

.build-receipt > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.build-receipt b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: #052d1c;
  background: #4cda8e;
  font-size: 8px;
}

.build-receipt .receipt-brand {
  color: #7f8da8;
  font-size: 9px;
  letter-spacing: 0.14em;
}

.receipt-brand i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.build-receipt time {
  margin-left: auto;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
}

.capability-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 11px 27px;
  margin-top: 32px;
  color: #8a99b5;
  font-size: 12px;
}

.capability-strip span {
  color: #7f8da8;
}

.capability-strip b {
  color: #667590;
  font-size: 12px;
  font-weight: 600;
}

/* Shared headings */
.section-heading {
  margin-bottom: 54px;
}

.section-heading > p,
.section-heading > div > p:not(.eyebrow) {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.62;
}

.section-heading.centered {
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-heading.centered > p:not(.eyebrow) {
  margin-right: auto;
  margin-left: auto;
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 70px;
}

.split-heading > div {
  max-width: 850px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px !important;
  color: var(--blue) !important;
  font-size: 12px !important;
  font-weight: 750;
  letter-spacing: 0.15em;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 22px;
  height: 2px;
  background: currentColor;
}

.centered-eyebrow {
  justify-content: center;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
}

.text-link svg {
  width: 17px;
  height: 17px;
  transition: transform 150ms ease;
}

.text-link:hover svg {
  transform: translateX(4px);
}

/* Builder demo */
.how-section {
  background: #fff;
}

.replay-build svg {
  color: var(--blue);
  width: 22px;
  height: 22px;
}

.builder-demo {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.builder-demo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid #e3eaf5;
  background: #f8fafe;
}

.demo-project {
  font-size: 13px;
  font-weight: 650;
}

.demo-project span {
  margin-left: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--blue);
  background: #e7f0ff;
  font-size: 10px;
  font-weight: 650;
}

.demo-project span.done {
  color: #087343;
  background: #dcf7e9;
}

.demo-tabs {
  display: flex;
  gap: 7px;
}

.demo-tabs button {
  padding: 6px 12px;
  border: 1px solid #dce5f2;
  border-radius: 7px;
  color: #75839c;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
}

.demo-tabs button.active {
  border-color: var(--ink);
  color: #fff;
  background: var(--ink);
}

.builder-demo-body {
  display: grid;
  grid-template-columns: 390px 1fr;
  min-height: 480px;
}

.demo-chat-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 18px 18px;
  border-right: 1px solid #e3eaf5;
  background: #fbfcfe;
}

.chat-bubble {
  max-width: 100%;
  padding: 15px 16px;
  border-radius: 13px;
  font-size: 13px;
  line-height: 1.45;
}

.chat-user {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 12px 28px rgba(36, 111, 242, 0.2);
}

.chat-assistant {
  align-self: flex-end;
  color: #42516c;
  background: #edf2f8;
}

.build-checklist {
  padding: 16px 15px;
  border: 1px solid #dce6f3;
  border-radius: 12px;
  background: #fff;
}

.build-checklist > strong {
  display: block;
  margin-bottom: 13px;
  font-size: 12px;
}

.checklist-item {
  display: grid;
  grid-template-columns: 17px auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  color: #52617a;
  font-size: 11.5px;
}

.checklist-item .step-dot {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1.5px solid #b8c5d9;
  border-radius: 50%;
}

.checklist-item b {
  font-weight: 540;
  white-space: nowrap;
}

.checklist-item > i {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef5;
}

.checklist-item > i::before {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  content: "";
  transition: width 700ms ease;
}

.checklist-item.running .step-dot {
  border-color: var(--blue);
  border-top-color: transparent;
  animation: spin 800ms linear infinite;
}

.checklist-item.running > i::before {
  width: 56%;
  animation: progress-pulse 900ms ease-in-out infinite alternate;
}

.checklist-item.done .step-dot {
  border-color: #27b36e;
  background: #27b36e;
}

.checklist-item.done .step-dot::after {
  position: absolute;
  top: 1px;
  left: 3px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  transform: rotate(45deg);
}

.checklist-item.done > i::before {
  width: 100%;
  background: #73d7a4;
}

.demo-chat-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 12px 10px 12px 14px;
  border: 1px solid #dce5f2;
  border-radius: 10px;
  color: #9aa7ba;
  background: #fff;
  font-size: 11.5px;
}

.demo-chat-input span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  color: #fff;
  background: var(--blue);
  font-size: 17px;
}

.demo-workspace {
  position: relative;
  min-width: 0;
  min-height: 480px;
  padding: 20px;
  background: #fff;
}

.demo-panel {
  display: none;
  height: 100%;
}

.demo-panel.active {
  display: block;
  animation: panel-in 220ms ease both;
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.overview-card {
  min-height: 155px;
  padding: 14px;
  border: 1px solid #dfe7f3;
  border-radius: 12px;
  background: #fff;
}

.overview-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 11px;
}

.overview-card header span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 650;
}

.overview-card header svg {
  width: 14px;
  height: 14px;
  color: var(--blue);
}

.overview-card header em {
  color: #8c9ab1;
  font-size: 9.5px;
  font-style: normal;
}

.mini-page-preview {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 7px;
}

.mini-page-preview > i {
  display: block;
  min-height: 87px;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--blue) 0 7px, #e7edf6 7px 14px, #e7edf6 18px 23px, #e7edf6 27px 32px, transparent 32px);
}

.mini-page-preview > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.mini-page-preview b {
  height: 24px;
  border-radius: 4px;
  background: #eaf0f8;
}

.mini-page-preview span {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 5px;
  background: #e6ecf4;
}

.mini-page-preview span:nth-of-type(2) {
  width: 76%;
}

.mini-page-preview span:nth-of-type(3) {
  width: 56%;
}

.schema-lines,
.role-lines,
.test-lines {
  display: grid;
  gap: 12px;
}

.schema-lines span {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 10px;
}

.schema-lines b {
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 520;
}

.schema-lines i,
.role-lines b,
.test-lines b {
  height: 6px;
  border-radius: 999px;
  background: #edf1f6;
}

.role-lines span,
.test-lines span {
  display: grid;
  grid-template-columns: 21px 47px 1fr;
  align-items: center;
  gap: 8px;
  color: #56647c;
  font-size: 10px;
}

.role-lines i {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #dce8fb;
}

.test-lines span {
  grid-template-columns: 18px 1fr;
}

.test-lines i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: #fff;
  background: #31b374;
  font-size: 8px;
  font-style: normal;
}

.deploy-bar {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  margin-top: 13px;
  padding: 13px 18px 19px;
  overflow: hidden;
  border-radius: 12px;
  color: #fff;
  background: var(--ink);
}

.deploy-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #6ea6ff;
  background: rgba(70, 123, 215, 0.14);
}

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

.deploy-bar strong,
.deploy-bar span {
  display: block;
}

.deploy-bar strong {
  margin-bottom: 2px;
  font-size: 11.5px;
}

.deploy-bar span {
  color: #8897b0;
  font-size: 9.5px;
}

.deploy-bar em {
  color: #a9c8ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-style: normal;
}

.deploy-bar > i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
}

.deploy-bar > i b {
  display: block;
  width: 4%;
  height: 100%;
  background: linear-gradient(90deg, #3880f7, #77acff);
  transition: width 550ms ease;
}

.code-window,
.db-browser,
.run-log {
  height: 100%;
  overflow: hidden;
  border: 1px solid #dfe7f3;
  border-radius: 12px;
  background: #f8fafe;
}

.code-window {
  display: grid;
  grid-template-columns: 145px 1fr;
  background: #0d1727;
}

.code-sidebar {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 17px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #7e8ca5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.code-sidebar span {
  padding: 7px 8px;
  border-radius: 5px;
}

.code-sidebar span.active {
  color: #dce8ff;
  background: rgba(71, 119, 197, 0.18);
}

.code-window pre {
  margin: 0;
  padding: 34px 28px;
  overflow: auto;
  color: #c8d2e4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.9;
}

.code-purple {
  color: #c49cff;
}

.code-blue {
  color: #7bb4ff;
}

.code-green {
  color: #7de2aa;
}

.db-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #dfe7f3;
  background: #fff;
}

.db-header span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
}

.db-header span svg {
  color: var(--blue);
}

.db-header button {
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: var(--blue);
  font-size: 10px;
}

.db-layout {
  display: grid;
  grid-template-columns: 135px 1fr;
  height: calc(100% - 53px);
}

.db-layout aside {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 10px;
  border-right: 1px solid #dfe7f3;
  color: #6c7a92;
  background: #f9fbfe;
  font-size: 10px;
}

.db-layout aside strong {
  margin: 0 8px 6px;
  color: #394660;
}

.db-layout aside span {
  padding: 7px 8px;
  border-radius: 6px;
}

.db-layout aside span.active {
  color: var(--blue);
  background: #e7f0ff;
}

.db-table-mini {
  padding: 18px;
  overflow: auto;
  background: #fff;
}

.db-table-mini > div {
  display: grid;
  grid-template-columns: 45px 1.2fr 1.4fr 0.7fr;
  min-width: 500px;
  border-bottom: 1px solid #e7edf6;
  font-size: 10px;
}

.db-table-mini b,
.db-table-mini span {
  padding: 10px 8px;
}

.db-table-mini b {
  color: #7d8ca5;
  background: #f7f9fc;
  text-transform: uppercase;
}

.run-log {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
  background: #fff;
}

.run-log > div {
  display: grid;
  grid-template-columns: 55px 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 13px 15px;
  border: 1px solid #e2e9f4;
  border-radius: 10px;
  color: #42516b;
  font-size: 11px;
}

.run-log time {
  color: #8b99b0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.run-log b {
  color: var(--green);
  font-size: 9px;
  text-transform: uppercase;
}

/* Feature stage */
.feature-section {
  background: #f9fbff;
}

.feature-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: none;
}

.feature-tabs::-webkit-scrollbar {
  display: none;
}

.feature-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 10px 13px;
  border: 1px solid #dae4f2;
  border-radius: 9px;
  color: #5d6b83;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 580;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.feature-tabs button:hover {
  transform: translateY(-1px);
  border-color: #b7c9e6;
}

.feature-tabs button.active {
  border-color: var(--ink);
  color: #fff;
  background: var(--ink);
}

.feature-tabs svg {
  width: 15px;
  height: 15px;
}

.feature-stage {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px 48px;
  border-right: 1px solid #e1e8f4;
}

.feature-kicker {
  margin-bottom: 19px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.14em;
}

.feature-copy h3 {
  margin-bottom: 18px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 630;
}

.feature-copy > p {
  margin-bottom: 25px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.feature-copy ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-copy li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #35425b;
  font-size: 13px;
}

.feature-copy li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: 10px;
}

.feature-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 470px;
  padding: 42px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 20%, rgba(85, 166, 255, 0.25), transparent 31%),
    radial-gradient(circle at 20% 80%, rgba(168, 146, 255, 0.22), transparent 32%),
    #f4f8ff;
}

.feature-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: linear-gradient(rgba(102, 143, 218, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 143, 218, 0.12) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, #000, transparent 82%);
}

.feature-ui {
  position: relative;
  z-index: 2;
  width: min(100%, 610px);
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(203, 217, 239, 0.95);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 28px 70px rgba(41, 73, 128, 0.17);
  animation: panel-in 260ms ease both;
}

.feature-ui-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #e4ebf5;
  color: #3e4d68;
  background: #fbfcfe;
  font-size: 11px;
  font-weight: 650;
}

.feature-ui-top span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-ui-top svg {
  width: 16px;
  height: 16px;
  color: var(--blue);
}

.feature-ui-top b {
  padding: 6px 9px;
  border-radius: 6px;
  color: var(--blue);
  background: #eaf2ff;
  font-size: 9px;
}

.feature-db-body {
  padding: 17px;
}

.feature-db-tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
}

.feature-db-tabs span {
  padding: 6px 8px;
  border-radius: 6px;
  color: #71809a;
  background: #f0f4f9;
  font-size: 9px;
}

.feature-db-tabs span.active {
  color: #fff;
  background: var(--blue);
}

.feature-data-table {
  overflow: hidden;
  border: 1px solid #e0e8f4;
  border-radius: 8px;
}

.feature-data-table > div {
  display: grid;
  grid-template-columns: 35px 1.2fr 1fr 1fr 0.8fr;
  border-top: 1px solid #e8eef6;
  color: #485671;
  font-size: 9px;
}

.feature-data-table > div:first-child {
  border-top: 0;
  color: #8090aa;
  background: #f8fafe;
  font-weight: 650;
  text-transform: uppercase;
}

.feature-data-table span,
.feature-data-table b {
  padding: 9px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feature-data-table b {
  font-weight: 550;
}

.auth-preview {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  min-height: 270px;
}

.auth-preview-form {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 28px;
  border-right: 1px solid #e3eaf5;
}

.auth-preview-form h4 {
  margin: 0 0 3px;
  font-size: 17px;
}

.auth-preview-form p {
  margin: 0 0 8px;
  color: #7a899f;
  font-size: 10px;
}

.fake-input {
  height: 34px;
  border: 1px solid #dfe7f3;
  border-radius: 7px;
  background: #fbfcfe;
}

.fake-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 7px;
  color: #fff;
  background: var(--blue);
  font-size: 10px;
  font-weight: 650;
}

.auth-role-list {
  display: grid;
  align-content: center;
  gap: 11px;
  padding: 28px;
  background: #f8faff;
}

.auth-role-list > span {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #e2e9f4;
  border-radius: 8px;
  color: #4b5972;
  background: #fff;
  font-size: 10px;
}

.auth-role-list i {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #dbe8fc;
}

.auth-role-list b {
  padding: 4px 7px;
  border-radius: 5px;
  color: var(--blue);
  background: #edf4ff;
  font-size: 8px;
}

.payment-preview {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  padding: 20px;
}

.payment-summary,
.payment-checkout {
  padding: 17px;
  border: 1px solid #e1e8f4;
  border-radius: 10px;
}

.payment-summary h4,
.payment-checkout h4 {
  margin: 0 0 15px;
  font-size: 12px;
}

.payment-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #edf1f7;
  color: #64738c;
  font-size: 9px;
}

.payment-row strong {
  color: #25324a;
}

.payment-total {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  padding: 12px;
  border-radius: 8px;
  color: #fff;
  background: var(--ink);
  font-size: 10px;
}

.checkout-card {
  padding: 12px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #145ed8, #3c8aff);
}

.checkout-card span,
.checkout-card b {
  display: block;
}

.checkout-card span {
  margin-bottom: 22px;
  opacity: 0.72;
  font-size: 8px;
}

.checkout-card b {
  font-size: 18px;
}

.checkout-lines {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.checkout-lines i {
  height: 9px;
  border-radius: 5px;
  background: #edf1f7;
}

.storage-preview {
  padding: 19px;
}

.storage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.storage-toolbar span {
  color: #5e6c84;
  font-size: 10px;
}

.storage-toolbar b {
  padding: 6px 9px;
  border-radius: 6px;
  color: #fff;
  background: var(--blue);
  font-size: 9px;
}

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

.file-card {
  overflow: hidden;
  border: 1px solid #e1e8f4;
  border-radius: 8px;
}

.file-thumb {
  height: 70px;
  background: linear-gradient(135deg, #d8e8ff, #edf4ff 52%, #d9f0ff);
}

.file-card:nth-child(2) .file-thumb {
  background: linear-gradient(135deg, #ede3ff, #f6f0ff 55%, #dfeaff);
}

.file-card:nth-child(3) .file-thumb {
  background: linear-gradient(135deg, #d9f4e9, #f1fbf7 55%, #dff0ff);
}

.file-card span {
  display: block;
  padding: 8px;
  color: #53617a;
  background: #fff;
  font-size: 8.5px;
}

.backend-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
}

.api-column,
.workflow-column {
  padding: 15px;
  border: 1px solid #e1e8f4;
  border-radius: 10px;
}

.api-column h4,
.workflow-column h4 {
  margin: 0 0 13px;
  font-size: 11px;
}

.api-row {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #edf1f7;
  color: #59677e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px;
}

.api-row b {
  color: var(--green);
}

.workflow-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  padding: 9px;
  border: 1px solid #dfe7f3;
  border-radius: 8px;
  color: #506079;
  background: #fff;
  font-size: 8.5px;
}

.workflow-node:not(:last-child)::after {
  position: absolute;
  bottom: -14px;
  left: 21px;
  width: 1px;
  height: 13px;
  background: #bfd0e9;
  content: "";
}

.workflow-node i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--blue);
  background: #eaf2ff;
  font-style: normal;
}

.integration-preview {
  position: relative;
  min-height: 270px;
}

.integration-center {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid #a9c4ef;
  border-radius: 22px;
  color: var(--blue);
  background: #fff;
  box-shadow: 0 15px 38px rgba(36, 111, 242, 0.17);
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: 750;
}

.integration-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #dce6f4;
  border-radius: 15px;
  color: #40506a;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 62, 112, 0.08);
  font-size: 8px;
  font-weight: 700;
}

.integration-node::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 128px;
  height: 1px;
  background: linear-gradient(90deg, rgba(36, 111, 242, 0.52), transparent);
  content: "";
  transform-origin: left center;
}

.integration-node.node-1 { top: 20px; left: 40px; }
.integration-node.node-1::before { transform: rotate(28deg); }
.integration-node.node-2 { top: 20px; right: 40px; }
.integration-node.node-2::before { transform: rotate(152deg); }
.integration-node.node-3 { bottom: 20px; left: 40px; }
.integration-node.node-3::before { transform: rotate(-28deg); }
.integration-node.node-4 { right: 40px; bottom: 20px; }
.integration-node.node-4::before { transform: rotate(208deg); }
.integration-node.node-5 { top: 50%; left: 12px; transform: translateY(-50%); }
.integration-node.node-5::before { transform: rotate(0); }
.integration-node.node-6 { top: 50%; right: 12px; transform: translateY(-50%); }
.integration-node.node-6::before { transform: rotate(180deg); }

.code-preview-full {
  display: grid;
  grid-template-columns: 135px 1fr;
  min-height: 270px;
  color: #cbd6e8;
  background: #0d1727;
}

.code-file-tree {
  padding: 17px 11px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  color: #71809b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px;
}

.code-file-tree strong {
  display: block;
  margin-bottom: 10px;
  color: #aebbd0;
}

.code-file-tree span {
  display: block;
  padding: 5px 6px;
  border-radius: 4px;
}

.code-file-tree span.active {
  color: #e2ebfa;
  background: rgba(79, 130, 214, 0.17);
}

.code-preview-full pre {
  margin: 0;
  padding: 27px 22px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  line-height: 1.85;
}

/* Comparison */
.comparison-section {
  background:
    radial-gradient(circle at 10% 10%, rgba(139, 182, 255, 0.22), transparent 28%),
    linear-gradient(180deg, #f7faff, #f3f7ff);
}

.comparison-heading {
  margin-bottom: 48px;
}

.comparison-heading .comparison-kicker {
  margin-top: 14px;
  color: #1d2a42;
}

.comparison-caption {
  margin: 0 0 16px;
  color: #1d2a42;
  font-size: 20px;
  line-height: 1.25;
  text-align: center;
}

.comparison-table {
  overflow: hidden;
  border: 1px solid #d4e0f1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 24px 70px rgba(36, 73, 130, 0.09);
  backdrop-filter: blur(10px);
}

.comparison-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  border-top: 1px solid #e3eaf5;
}

.comparison-row:first-child {
  border-top: 0;
}

.comparison-row > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 12px 24px;
  border-left: 1px solid #e3eaf5;
  color: #5a6880;
  font-size: 13px;
}

.comparison-row > div:first-child {
  border-left: 0;
  color: #1f2b42;
  font-weight: 560;
}

.comparison-row > div > svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #8495b1;
}

.comparison-head > div {
  min-height: 67px;
  color: #7787a1;
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 650;
}

.comparison-row .kreova-column {
  color: #17243c;
  background: rgba(235, 243, 255, 0.82);
  font-weight: 570;
}

.comparison-head .kreova-column {
  position: relative;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 720;
}

.comparison-head .kreova-column > b {
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 6px;
  color: #fff;
  background: var(--blue);
  font-size: 9px;
  letter-spacing: 0.05em;
}

.mini-logo {
  position: relative;
  display: inline-block;
  width: 23px;
  height: 20px;
  border: 2px solid var(--blue);
  border-radius: 6px;
  background: #fff;
}

.mini-logo::before,
.mini-logo::after {
  position: absolute;
  top: 6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--blue);
  content: "";
}

.mini-logo::before { left: 5px; }
.mini-logo::after { right: 5px; }

.mini-logo i {
  position: absolute;
  right: 5px;
  bottom: 3px;
  left: 5px;
  height: 2px;
  border-radius: 3px;
  background: var(--blue);
}

.yes-dot,
.no-dot,
.warning-dot,
.blue-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 750;
}

.yes-dot {
  color: #fff;
  background: var(--green);
}

.no-dot {
  border: 1px solid #c9d4e5;
  color: #9aa8bc;
  background: #fff;
}

.warning-dot {
  border: 1px solid #e8b44c;
  color: #b06a00;
  background: #fff8e8;
}

.blue-check {
  color: #fff;
  background: var(--blue);
}

.comparison-result > div {
  min-height: 65px;
  background: #fbfcfe;
}

.comparison-result .kreova-column {
  color: var(--blue-dark);
  background: #dfebff;
}

/* Templates */
.templates-section {
  background: #fff;
}

.template-heading {
  margin-bottom: 40px;
}

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

.template-card {
  overflow: hidden;
  border: 1px solid #d8e2f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(34, 66, 118, 0.04);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.template-card:hover {
  transform: translateY(-5px);
  border-color: #bfd0e9;
  box-shadow: 0 22px 48px rgba(36, 70, 124, 0.11);
}

.template-preview {
  position: relative;
  display: block;
  width: 100%;
  height: 195px;
  padding: 15px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid #e1e8f4;
  cursor: pointer;
  background: #eef4ff;
}

.template-preview::before {
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(204, 218, 239, 0.95);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  content: "";
  box-shadow: 0 8px 18px rgba(44, 75, 127, 0.05);
}

.preview-crm {
  background: linear-gradient(135deg, #edf3ff, #f4f8ff);
}

.preview-crm .preview-side {
  position: absolute;
  z-index: 2;
  top: 29px;
  bottom: 29px;
  left: 30px;
  display: grid;
  align-content: start;
  gap: 8px;
  width: 37px;
  padding-top: 9px;
  border-right: 1px solid #e6edf6;
}

.preview-crm .preview-side i {
  width: 24px;
  height: 5px;
  border-radius: 4px;
  background: #e2e8f2;
}

.preview-crm .preview-side i:first-child {
  background: var(--blue);
}

.preview-crm .preview-main {
  position: absolute;
  z-index: 2;
  top: 31px;
  right: 30px;
  bottom: 31px;
  left: 78px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.preview-crm .preview-main b {
  height: 29px;
  border-radius: 5px;
  background: #edf1f7;
}

.preview-crm .preview-main i,
.preview-crm .preview-main em {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 5px;
  background: #e5ebf4;
}

.preview-crm .preview-main em:nth-of-type(1) { width: 90%; }
.preview-crm .preview-main em:nth-of-type(2) { width: 73%; }
.preview-crm .preview-main em:nth-of-type(3) { width: 60%; }

.preview-booking {
  background: linear-gradient(135deg, #f0edff, #f7f6ff);
}

.booking-head,
.booking-days,
.booking-lines {
  position: absolute;
  z-index: 2;
  right: 30px;
  left: 30px;
}

.booking-head {
  top: 31px;
  width: 120px;
  height: 7px;
  border-radius: 6px;
  background: #dfe5ef;
}

.booking-days {
  top: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

.booking-days i {
  height: 30px;
  border-radius: 5px;
  background: #eef2f8;
}

.booking-days i.active {
  background: var(--blue);
}

.booking-lines {
  top: 101px;
  display: grid;
  gap: 9px;
}

.booking-lines i {
  height: 8px;
  border-radius: 6px;
  background: #edf1f7;
}

.booking-lines i:nth-child(2) { width: 76%; }
.booking-lines i:nth-child(3) { width: 55%; }

.preview-saas {
  background: linear-gradient(135deg, #eaf8ff, #f2fbff);
}

.chart-bars {
  position: absolute;
  z-index: 2;
  top: 34px;
  right: 31px;
  left: 31px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 74px;
}

.chart-bars i {
  width: 13%;
  border-radius: 4px 4px 0 0;
  background: #dce7f7;
}

.chart-bars i:nth-child(1) { height: 35%; }
.chart-bars i:nth-child(2) { height: 55%; }
.chart-bars i:nth-child(3) { height: 43%; }
.chart-bars i:nth-child(4) { height: 74%; background: var(--blue); }
.chart-bars i:nth-child(5) { height: 62%; }
.chart-bars i:nth-child(6) { height: 88%; background: var(--blue); }

.chart-panels {
  position: absolute;
  z-index: 2;
  right: 31px;
  bottom: 31px;
  left: 31px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.chart-panels i {
  height: 46px;
  border-radius: 6px;
  background: #edf2f8;
}

.preview-portal {
  background: linear-gradient(135deg, #eef9f3, #f6fbf8);
}

.portal-main,
.portal-side,
.portal-action {
  position: absolute;
  z-index: 2;
}

.portal-main {
  top: 34px;
  right: 105px;
  bottom: 57px;
  left: 31px;
  border-radius: 6px;
  background: #edf2f7;
}

.portal-side {
  top: 34px;
  right: 31px;
  display: grid;
  gap: 8px;
  width: 60px;
}

.portal-side i {
  height: 36px;
  border-radius: 6px;
  background: #eef2f7;
}

.portal-action {
  right: 31px;
  bottom: 31px;
  left: 31px;
  height: 19px;
  border-radius: 5px;
  background: var(--blue);
}

.preview-marketplace {
  background: linear-gradient(135deg, #fff4ec, #fff8f4);
}

.market-head,
.market-grid {
  position: absolute;
  z-index: 2;
  right: 31px;
  left: 31px;
}

.market-head {
  top: 33px;
  width: 115px;
  height: 7px;
  border-radius: 6px;
  background: #dfe5ef;
}

.market-grid {
  top: 58px;
  bottom: 31px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.market-grid i {
  border-radius: 6px;
  background: #edf1f7;
}

.market-grid i.active {
  border: 1px solid #b7cdf0;
  background: #e3edff;
}

.preview-ops {
  background: linear-gradient(135deg, #edf2ff, #f7f8ff);
}

.ops-top,
.ops-lines {
  position: absolute;
  z-index: 2;
  right: 31px;
  left: 31px;
}

.ops-top {
  top: 31px;
  height: 20px;
  border-radius: 5px;
  background: var(--blue);
}

.ops-lines {
  top: 62px;
  display: grid;
  gap: 9px;
}

.ops-lines i {
  height: 10px;
  border-radius: 6px;
  background: #edf1f7;
}

.ops-lines i:nth-child(3) { width: 82%; }
.ops-lines i:nth-child(4) { width: 60%; }

.template-body {
  padding: 24px 22px 22px;
}

.template-body h3 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 630;
}

.template-body > p {
  min-height: 70px;
  margin-bottom: 13px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.62;
}

.template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.template-tags span {
  padding: 5px 8px;
  border-radius: 6px;
  color: #64728b;
  background: #f0f4f9;
  font-size: 9px;
}

.template-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  color: var(--blue);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.template-link svg {
  width: 15px;
  height: 15px;
  transition: transform 150ms ease;
}

.template-link:hover svg {
  transform: translateX(4px);
}

/* Platform */
.platform-section {
  background:
    radial-gradient(circle at 15% 10%, rgba(145, 185, 255, 0.21), transparent 25%),
    linear-gradient(180deg, #f5f8ff, #eff5ff);
}

.platform-comparison {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 20px;
}

.usual-card,
.kreova-card {
  overflow: hidden;
  border: 1px solid #d5e1f2;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 20px 58px rgba(36, 72, 127, 0.09);
  backdrop-filter: blur(12px);
}

.usual-card > header,
.kreova-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 15px 19px;
  border-bottom: 1px solid #e2eaf5;
}

.usual-card > header > div > span,
.kreova-card > header > div > span,
.kreova-card > header > span {
  display: block;
  margin-bottom: 3px;
  color: #1d2a42;
  font-size: 14px;
  font-weight: 680;
}

.usual-card > header small,
.kreova-card > header small {
  color: #8190aa;
  font-size: 10px;
}

.play-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #d9e4f2;
  border-radius: 8px;
  color: var(--blue);
  background: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
}

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

.service-journey {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 498px;
  padding: 20px;
}

.journey-step {
  display: grid;
  grid-template-columns: 34px 115px 18px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  opacity: 0.18;
  transform: translateX(-8px);
  transition: opacity 330ms ease, transform 330ms ease, border-color 330ms ease, background 330ms ease;
}

.journey-step.visible {
  border-color: #e1e9f4;
  background: #fff;
  opacity: 1;
  transform: translateX(0);
}

.service-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 8px;
  color: #667791;
  background: #eef3fa;
}

.service-icon svg {
  width: 16px;
  height: 16px;
}

.service-icon.ai-icon {
  color: #fff;
  background: var(--blue);
  font-size: 9px;
  font-weight: 750;
}

.journey-step > b {
  color: #26334b;
  font-size: 11px;
  font-weight: 620;
}

.journey-step > i {
  color: #9aa8bc;
  font-style: normal;
}

.journey-step > em {
  color: #728099;
  font-size: 10.5px;
  font-style: normal;
}

.journey-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 47px;
  margin-top: 4px;
  border: 1px dashed #c9d6e9;
  border-radius: 10px;
  color: #596880;
  background: #f7f9fc;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 350ms ease, transform 350ms ease;
}

.journey-result.visible {
  opacity: 1;
  transform: scale(1);
}

.journey-result span {
  font-size: 20px;
}

.journey-result strong {
  font-size: 11px;
}

.usual-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 55px;
  padding: 0 20px;
  border-top: 1px solid #e2eaf5;
  color: #7c8aa1;
  background: #fafcff;
  font-size: 10px;
}

.usual-card > footer strong {
  color: #34415a;
  font-size: 11px;
}

.kreova-card {
  display: flex;
  flex-direction: column;
  border-color: #bcd2f4;
  background: linear-gradient(180deg, rgba(237, 245, 255, 0.96), rgba(226, 238, 255, 0.96));
}

.kreova-card > header {
  border-bottom-color: #cfdef2;
}

.kreova-card > header b {
  padding: 5px 8px;
  border-radius: 6px;
  color: #fff;
  background: var(--blue);
  font-size: 9px;
  letter-spacing: 0.05em;
}

.kreova-route {
  display: grid;
  grid-template-columns: 90px 1fr 130px;
  align-items: center;
  gap: 14px;
  padding: 37px 24px 25px;
}

.kreova-node,
.product-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mini-logo.large {
  width: 46px;
  height: 41px;
  border-width: 3px;
  border-radius: 11px;
  box-shadow: 0 10px 24px rgba(36, 111, 242, 0.15);
}

.mini-logo.large::before,
.mini-logo.large::after {
  top: 13px;
  width: 5px;
  height: 5px;
}

.mini-logo.large::before { left: 11px; }
.mini-logo.large::after { right: 11px; }
.mini-logo.large i { right: 10px; bottom: 7px; left: 10px; height: 3px; }

.kreova-node strong {
  margin-top: 9px;
  font-size: 12px;
}

.route-line {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: rgba(36, 111, 242, 0.2);
}

.route-line b {
  position: absolute;
  top: 0;
  left: -30%;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  animation: route-flow 1.6s linear infinite;
}

.product-node {
  padding: 13px 9px;
  border: 1px solid #a9c7f3;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 28px rgba(36, 88, 167, 0.1);
  opacity: 0.25;
  transform: scale(0.92);
  transition: opacity 400ms ease, transform 400ms ease, box-shadow 400ms ease;
}

.product-node.visible {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 18px 40px rgba(36, 111, 242, 0.17);
}

.product-node > span {
  font-size: 24px;
}

.product-node strong {
  margin-top: 5px;
  font-size: 11px;
}

.product-node small {
  margin-top: 3px;
  color: #7786a0;
  font-size: 7.5px;
}

.included-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  padding: 0 24px 24px;
}

.included-cloud span {
  padding: 6px 9px;
  border: 1px solid #cfdef2;
  border-radius: 999px;
  color: #4d6486;
  background: rgba(255, 255, 255, 0.65);
  font-size: 9px;
}

.kreova-card > p {
  margin: auto 24px 24px;
  padding: 17px;
  border: 1px solid rgba(188, 210, 244, 0.9);
  border-radius: 11px;
  color: #52647f;
  background: rgba(255, 255, 255, 0.57);
  font-size: 10.5px;
  line-height: 1.6;
  text-align: center;
}

.three-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid #d5e1f2;
  border-radius: 16px;
  background: #dfe8f5;
}

.three-steps article {
  min-height: 190px;
  padding: 29px 28px;
  background: rgba(255, 255, 255, 0.89);
}

.three-steps article > span {
  display: inline-flex;
  margin-bottom: 29px;
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
}

.three-steps h3 {
  margin-bottom: 10px;
  font-size: 17px;
}

.three-steps p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.62;
}

/* Away section */
.away-section {
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 90% 15%, rgba(39, 111, 242, 0.34), transparent 31%),
    radial-gradient(circle at 10% 90%, rgba(104, 68, 221, 0.17), transparent 28%),
    var(--night);
}

.away-section::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: linear-gradient(rgba(109, 149, 220, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 149, 220, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 70% 50%, #000, transparent 76%);
}

.away-orb {
  position: absolute;
  top: 80px;
  right: 6%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(57, 115, 237, 0.15);
  filter: blur(70px);
}

.away-grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: center;
  gap: 75px;
}

.light-eyebrow {
  color: #75a9ff !important;
}

.away-copy h2 {
  margin-bottom: 24px;
  color: #fff;
}

.away-copy > p:not(.eyebrow) {
  max-width: 570px;
  margin-bottom: 38px;
  color: #9fadc4;
  font-size: 16px;
  line-height: 1.72;
}

.away-steps {
  display: grid;
  gap: 12px;
}

.away-steps article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  padding: 14px 15px;
  border: 1px solid rgba(136, 166, 216, 0.1);
  border-radius: 11px;
  opacity: 0.43;
  transition: opacity 250ms ease, border-color 250ms ease, background 250ms ease, transform 250ms ease;
}

.away-steps article.active {
  border-color: rgba(100, 155, 250, 0.35);
  background: rgba(59, 109, 196, 0.11);
  opacity: 1;
  transform: translateX(5px);
}

.away-steps article > span {
  color: #73a8ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
}

.away-steps h3 {
  margin-bottom: 5px;
  font-size: 14px;
  letter-spacing: -0.015em;
}

.away-steps p {
  margin: 0;
  color: #91a0b9;
  font-size: 11px;
}

.away-visual {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.laptop-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 680px);
  padding: 12px;
  border: 1px solid rgba(124, 155, 206, 0.28);
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(145deg, #27344a, #111b2d);
  box-shadow: 0 45px 95px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transform: rotateY(-4deg) rotateX(1deg);
}

.laptop-camera {
  position: absolute;
  z-index: 3;
  top: 4px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #070d17;
  transform: translateX(-50%);
}

.laptop-screen {
  overflow: hidden;
  border-radius: 9px;
  color: #19253a;
  background: #f6f8fc;
}

.laptop-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 39px;
  padding: 0 13px;
  border-bottom: 1px solid #e0e7f2;
  color: #67758d;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
}

.laptop-topbar b {
  padding: 5px 7px;
  border-radius: 5px;
  color: var(--blue);
  background: #e9f1ff;
  font-family: Inter, sans-serif;
  font-size: 7.5px;
}

.laptop-topbar b.done {
  color: #087343;
  background: #dcf7e9;
}

.laptop-content {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  min-height: 330px;
}

.laptop-chat {
  padding: 14px;
  border-right: 1px solid #e1e8f3;
  background: #fbfcfe;
}

.tiny-bubble {
  margin-bottom: 17px;
  padding: 11px;
  border-radius: 9px;
  color: #fff;
  background: var(--blue);
  font-size: 8px;
  line-height: 1.5;
}

.tiny-task {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border-bottom: 1px solid #edf1f6;
  color: #5e6c83;
  font-size: 7.5px;
}

.tiny-task i {
  position: relative;
  width: 12px;
  height: 12px;
  border: 1px solid #aebbd0;
  border-radius: 50%;
}

.tiny-task i.done {
  border-color: var(--green);
  background: var(--green);
}

.tiny-task i.done::after {
  position: absolute;
  top: 1px;
  left: 3px;
  width: 3px;
  height: 6px;
  border: solid #fff;
  border-width: 0 1px 1px 0;
  content: "";
  transform: rotate(45deg);
}

.laptop-preview {
  padding: 14px;
}

.preview-window-top {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid #e0e7f2;
  border-radius: 7px 7px 0 0;
  background: #fff;
}

.preview-window-top i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d8e0ec;
}

.preview-window-top span {
  margin-left: 6px;
  color: #8290a7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 6.5px;
}

.preview-invoice {
  display: grid;
  gap: 13px;
  min-height: 232px;
  padding: 18px;
  border: 1px solid #e0e7f2;
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: #fff;
}

.preview-invoice b {
  font-size: 11px;
}

.preview-invoice span {
  height: 18px;
  border-radius: 5px;
  background: #edf2f8;
}

.preview-invoice em {
  align-self: end;
  justify-self: end;
  padding: 7px 9px;
  border-radius: 6px;
  color: #fff;
  background: var(--blue);
  font-size: 7px;
  font-style: normal;
}

.laptop-progress {
  display: grid;
  grid-template-columns: 128px 1fr 31px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 13px;
  border-top: 1px solid #e0e7f2;
  background: #fff;
}

.laptop-progress span,
.laptop-progress em {
  color: #6d7b93;
  font-size: 7.5px;
  font-style: normal;
}

.laptop-progress > i {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5ebf4;
}

.laptop-progress > i b {
  display: block;
  width: 12%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #72a9ff);
  transition: width 700ms ease;
}

.laptop-base {
  position: absolute;
  z-index: 1;
  bottom: 66px;
  left: 50%;
  width: min(110%, 750px);
  height: 23px;
  border-radius: 3px 3px 18px 18px;
  background: linear-gradient(180deg, #38465b, #111a29);
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%) perspective(300px) rotateX(25deg);
}

.laptop-base::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  height: 7px;
  border-radius: 0 0 7px 7px;
  background: #172234;
  content: "";
  transform: translateX(-50%);
}

.sleep-badge {
  position: absolute;
  z-index: 4;
  right: -7px;
  bottom: 37px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid rgba(118, 157, 221, 0.28);
  border-radius: 12px;
  background: rgba(17, 30, 51, 0.92);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.27);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms ease, transform 320ms ease;
  backdrop-filter: blur(12px);
}

.sleep-badge.visible {
  opacity: 1;
  transform: translateY(0);
}

.away-visual.is-away .laptop-screen {
  filter: brightness(0.82) saturate(0.82);
  transition: filter 500ms ease;
}

.away-visual.is-done .laptop-screen {
  filter: none;
}

.sleep-badge > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #95baff;
  background: rgba(67, 119, 209, 0.15);
}

.sleep-badge b,
.sleep-badge small {
  display: block;
}

.sleep-badge b {
  margin-bottom: 2px;
  font-size: 9px;
}

.sleep-badge small {
  color: #8594ad;
  font-size: 7.5px;
}

/* Trust */
.trust-section {
  background: #fff;
}

.trust-section .split-heading > p {
  align-self: end;
  max-width: 480px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

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

.trust-card {
  min-height: 245px;
  padding: 28px;
  border: 1px solid #dce5f2;
  border-radius: 15px;
  background: #fff;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.trust-card:hover {
  transform: translateY(-4px);
  border-color: #bed0e9;
  box-shadow: 0 18px 45px rgba(35, 68, 119, 0.09);
}

.trust-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 28px;
  border-radius: 12px;
  color: var(--blue);
  background: #eaf2ff;
}

.trust-icon svg {
  width: 21px;
  height: 21px;
}

.trust-card h3 {
  margin-bottom: 12px;
  font-size: 18px;
}

.trust-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

/* Pricing */
.pricing-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(132, 178, 255, 0.16), transparent 31%),
    #f3f7ff;
}

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

.price-card {
  position: relative;
  min-height: 560px;
  padding: 30px 27px;
  border: 1px solid #d4e0f1;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(32, 67, 119, 0.05);
}

.price-card.popular {
  border: 1.5px solid var(--blue);
  box-shadow: 0 23px 65px rgba(36, 111, 242, 0.16);
  transform: translateY(-10px);
}

.popular-label {
  position: absolute;
  top: -13px;
  left: 27px;
  padding: 6px 11px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.05em;
}

.price-card.power {
  border-color: #101b2e;
  color: #fff;
  background: var(--night);
  box-shadow: 0 24px 58px rgba(4, 12, 24, 0.17);
}

.price-card header h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.price-card header p {
  margin-bottom: 32px;
  color: #7d8ba3;
  font-size: 12px;
}

.price-card.power header p {
  color: #8291aa;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 27px;
}

.price strong {
  font-size: 45px;
  font-weight: 600;
  letter-spacing: -0.06em;
}

.price span {
  color: #8795ac;
  font-size: 12px;
}

.price-button {
  width: 100%;
  margin-bottom: 18px;
}

.power-button {
  border-color: #46536a;
  color: #fff;
  background: transparent;
}

.power-button:hover {
  border-color: #7284a4;
  background: rgba(255, 255, 255, 0.05);
}

.price-allowance {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 9px;
  /*
   * Every card reserves the height of a four-row block (Pro and Power, measured
   * at 132px), so the feature lists below start at the same height side by side.
   * Free has three rows since it lost "Up to 10 / day"; without this its list
   * sat 27px higher. align-content: start puts the spare room under the rows
   * instead of stretching them apart.
   */
  min-height: 132px;
  align-content: start;
  padding: 15px 0 17px;
  border-top: 1px solid #e8edf5;
  border-bottom: 1px solid #e8edf5;
  color: #53617a;
}

.price-card.power .price-allowance {
  border-color: #263247;
  color: #a5b0c3;
}

.price-allowance b {
  color: #1b2940;
  font-size: 12px;
}

.price-card.power .price-allowance b {
  color: #fff;
}

.price-allowance span {
  align-self: center;
  font-size: 10px;
}

.price-card ul {
  display: grid;
  gap: 13px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.price-card li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #526078;
  font-size: 11.5px;
}

.price-card.power li {
  color: #b9c2d2;
}

.price-card li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: 8px;
}

.price-card.power li > span {
  color: #09214a;
  background: #82b1ff;
}

.pricing-notes {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 37px;
  color: #7c8ba3;
  font-size: 11px;
}

.pricing-notes span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pricing-notes svg {
  width: 14px;
  height: 14px;
}

.pricing-footnote {
  max-width: 720px;
  margin: 20px auto 0;
  color: #8593a9;
  font-size: 11px;
  text-align: center;
}

/* FAQ */
.faq-section {
  background: #fff;
}

.faq-grid {
  display: grid;
  grid-template-columns: 0.74fr 1.26fr;
  gap: 90px;
}

.faq-heading {
  position: sticky;
  top: calc(var(--header-height) + 40px);
  align-self: start;
}

.faq-heading h2 {
  font-size: clamp(2.5rem, 4vw, 3.7rem);
}

.faq-heading > p:not(.eyebrow) {
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.faq-list {
  border-top: 1px solid #dce5f2;
}

.faq-item {
  border-bottom: 1px solid #dce5f2;
}

.faq-item > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 78px;
  padding: 22px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.faq-item > button svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #78869d;
  transition: transform 220ms ease;
}

.faq-item.open > button svg {
  transform: rotate(180deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms ease;
}

.faq-answer > p {
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.open .faq-answer > p {
  padding: 0 34px 27px 2px;
}

/* Final CTA and footer */
.final-section {
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(49, 113, 239, 0.46), transparent 35%),
    radial-gradient(circle at 30% 0%, rgba(112, 69, 220, 0.2), transparent 32%),
    var(--night);
}

.final-inner {
  position: relative;
  padding: 100px 0 90px;
  text-align: center;
}

.final-copy {
  max-width: 850px;
  margin: 0 auto 36px;
}

.final-copy h2 {
  margin-bottom: 20px;
  color: #fff;
}

.final-copy > p:not(.eyebrow) {
  max-width: 700px;
  margin: 0 auto;
  color: #a4b0c4;
  font-size: 16px;
  line-height: 1.65;
}

.final-composer {
  border-color: rgba(144, 174, 224, 0.28);
  background: rgba(28, 45, 75, 0.78);
  box-shadow: 0 0 0 7px rgba(94, 139, 221, 0.08), 0 24px 65px rgba(0, 0, 0, 0.28);
}

.final-composer textarea {
  color: #fff;
}

.final-composer .composer-footer {
  border-top-color: rgba(148, 174, 217, 0.17);
}

.final-composer .composer-note {
  margin-left: 0;
  color: #8290a9;
}

.final-trust {
  display: flex;
  justify-content: center;
  gap: 27px;
  margin-top: 35px;
  color: #8998b1;
  font-size: 11px;
}

.site-footer {
  position: relative;
  border-top: 1px solid rgba(131, 157, 202, 0.1);
  background: rgba(4, 10, 19, 0.48);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: 55px;
  padding-top: 62px;
  padding-bottom: 52px;
}

.brand-light {
  color: #fff;
}

.brand-light .brand-mark {
  color: #fff;
}

.brand-light .brand-face {
  background: transparent;
}

.footer-brand > p {
  max-width: 280px;
  margin: 22px 0 14px;
  color: #8492aa;
  font-size: 12px;
  line-height: 1.7;
}

.footer-brand small {
  color: #58667d;
  font-size: 9px;
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 12px;
}

.footer-column h3 {
  margin: 4px 0 8px;
  color: #61708a;
  font-size: 10px;
  font-weight: 680;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-column a {
  color: #a2aec1;
  font-size: 11.5px;
  transition: color 150ms ease;
}

.footer-column a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0 34px;
  border-top: 1px solid rgba(130, 154, 195, 0.11);
  color: #5c6a80;
  font-size: 9.5px;
}

/* Motion */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes progress-pulse {
  from { width: 28%; }
  to { width: 72%; }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes route-flow {
  to { left: 105%; }
}

/* Responsive */
@media (max-width: 1120px) {
  .desktop-nav {
    gap: 24px;
    margin-left: 30px;
  }

  .builder-demo-body {
    grid-template-columns: 330px 1fr;
  }

  .build-receipt {
    gap: 15px;
  }

  .build-receipt span:nth-of-type(5),
  .build-receipt span:nth-of-type(6) {
    display: none;
  }

  .platform-comparison {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .kreova-route {
    grid-template-columns: 72px 1fr 115px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .footer-grid {
    grid-template-columns: 1.5fr repeat(2, 1fr);
  }
}

@media (max-width: 960px) {
  :root {
    --header-height: 70px;
  }

  .desktop-nav,
  .nav-signin,
  .nav-actions > .button {
    display: none;
  }

  .menu-button {
    display: flex;
  }

  .hero {
    padding-top: calc(var(--header-height) + 70px);
  }

  .hero-title {
    font-size: clamp(3rem, 9vw, 5rem);
  }

  .crm-app {
    grid-template-columns: 160px 1fr;
  }

  .crm-sidebar {
    padding-right: 12px;
    padding-left: 12px;
  }

  .crm-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .crm-table .crm-row {
    grid-template-columns: 1.3fr 1fr 0.8fr;
  }

  .crm-row span:nth-child(3) {
    display: none;
  }

  .builder-demo-body {
    grid-template-columns: 1fr;
  }

  .demo-chat-pane {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    border-right: 0;
    border-bottom: 1px solid #e3eaf5;
  }

  .chat-assistant,
  .demo-chat-input {
    display: none;
  }

  .feature-stage {
    grid-template-columns: 1fr;
  }

  .feature-copy {
    border-right: 0;
    border-bottom: 1px solid #e1e8f4;
  }

  .comparison-row > div {
    padding-right: 16px;
    padding-left: 16px;
  }

  .template-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-comparison {
    grid-template-columns: 1fr;
  }

  .service-journey {
    min-height: auto;
  }

  .away-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .away-copy {
    max-width: 760px;
  }

  .away-visual {
    min-height: 500px;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .price-card.power {
    grid-column: 1 / -1;
    min-height: auto;
  }

  .price-card.popular {
    transform: none;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .faq-heading {
    position: static;
    max-width: 700px;
  }

  .footer-grid {
    grid-template-columns: 1.3fr repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .container {
    width: min(calc(100% - 30px), var(--container));
  }

  .section {
    padding: 86px 0;
  }

  h2 {
    font-size: clamp(2.3rem, 11vw, 3.3rem);
  }

  .hero {
    min-height: auto;
    padding-bottom: 74px;
  }

  .hero-title {
    font-size: clamp(2.6rem, 12vw, 4rem);
    line-height: 1.02;
  }

  .hero-title-blue {
    margin-top: 12px;
  }

  .hero-copy {
    margin-bottom: 34px;
    font-size: 15px;
  }

  .prompt-composer textarea {
    min-height: 120px;
    padding: 19px 18px 12px;
    font-size: 15px;
  }

  .composer-footer {
    flex-wrap: wrap;
    gap: 9px;
    padding: 10px;
  }

  /* On a phone the attach button keeps its paperclip and loses its words, so
     it sits beside the mic at the same size instead of vanishing (2026-09-21:
     the mic alone on that row looked like a mistake). */
  .attach-button {
    width: 35px;
    height: 35px;
    justify-content: center;
    padding: 0;
    gap: 0;
  }

  .attach-label {
    display: none;
  }

  .mic-locked {
    margin-left: 0;
  }

  .composer-note {
    order: 2;
    width: 100%;
    margin: 0;
    padding: 0 7px 3px;
  }

  .composer-submit {
    width: 100%;
    margin: 0;
  }

  .prompt-suggestions {
    justify-content: flex-start;
    margin: 30px auto 48px;
    overflow: hidden;
  }

  .prompt-suggestions > span {
    width: 100%;
    text-align: left;
  }

  .browser-bar {
    grid-template-columns: 50px 1fr;
    padding: 0 10px;
  }

  .browser-address {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .browser-live {
    display: none;
  }

  .crm-app {
    grid-template-columns: 1fr;
    min-height: 405px;
  }

  .crm-sidebar {
    display: none;
  }

  .crm-main {
    padding: 15px;
  }

  .crm-metrics {
    gap: 8px;
  }

  .crm-metrics article {
    padding: 13px;
  }

  .crm-metrics strong {
    font-size: 18px;
  }

  .crm-row {
    grid-template-columns: 1.4fr 1fr !important;
    font-size: 10px;
  }

  .crm-row span:nth-child(2) {
    display: none;
  }

  .edit-toolbar {
    display: none;
  }

  .build-receipt {
    min-height: 45px;
    gap: 12px;
    padding: 0 13px;
  }

  .build-receipt span:not(.receipt-brand) {
    display: none;
  }

  .capability-strip {
    justify-content: flex-start;
    gap: 9px 18px;
  }

  .capability-strip span {
    width: 100%;
  }

  .split-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 25px;
  }

  .section-heading > p,
  .section-heading > div > p:not(.eyebrow) {
    font-size: 15px;
  }

  .builder-demo-topbar {
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    flex-direction: column;
  }

  .demo-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .demo-chat-pane {
    display: block;
    padding: 13px;
  }

  .build-checklist {
    margin-top: 12px;
  }

  .demo-workspace {
    min-height: 525px;
    padding: 12px;
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .overview-card {
    min-height: 125px;
  }

  .overview-card.auth-card,
  .overview-card.tests-card {
    display: none;
  }

  .deploy-bar {
    margin-top: 10px;
  }

  .code-window {
    grid-template-columns: 1fr;
  }

  .code-sidebar {
    display: none;
  }

  .db-layout {
    grid-template-columns: 1fr;
  }

  .db-layout aside {
    display: none;
  }

  .run-log {
    padding: 12px;
  }

  .run-log > div {
    grid-template-columns: 45px 1fr;
  }

  .run-log b {
    display: none;
  }

  .feature-tabs {
    justify-content: flex-start;
  }

  .feature-copy {
    padding: 37px 27px;
  }

  .feature-visual {
    min-height: 390px;
    padding: 24px 15px;
  }

  .feature-ui {
    min-height: 295px;
  }

  .comparison-heading h2 br {
    display: none;
  }

  .comparison-table {
    overflow-x: auto;
  }

  .comparison-row {
    min-width: 760px;
  }

  .template-grid {
    grid-template-columns: 1fr;
  }

  .template-body > p {
    min-height: auto;
  }

  .journey-step {
    grid-template-columns: 34px 105px 18px 1fr;
    gap: 7px;
  }

  .journey-step > em {
    font-size: 9.5px;
  }

  .kreova-route {
    grid-template-columns: 65px 1fr 105px;
  }

  .three-steps {
    grid-template-columns: 1fr;
  }

  .three-steps article {
    min-height: auto;
  }

  .away-visual {
    min-height: 410px;
  }

  .laptop-shell {
    width: 96%;
    transform: none;
  }

  .laptop-content {
    grid-template-columns: 1fr;
    min-height: 260px;
  }

  .laptop-chat {
    display: none;
  }

  .laptop-preview {
    padding: 10px;
  }

  .laptop-base {
    bottom: 38px;
    width: 104%;
  }

  .sleep-badge {
    right: 0;
    bottom: 0;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-card {
    min-height: auto;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .price-card.power {
    grid-column: auto;
  }

  .pricing-notes,
  .final-trust {
    align-items: center;
    flex-direction: column;
    gap: 10px;
  }

  .final-inner {
    padding: 80px 0 72px;
  }

  .final-composer .composer-note {
    text-align: left;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 25px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(calc(100% - 24px), var(--container));
  }

  .brand-word {
    font-size: 22px;
  }

  .hero-eyebrow {
    padding-right: 11px;
    padding-left: 11px;
    font-size: 10.5px;
  }

  .hero-title {
    font-size: 2.72rem;
  }

  .crm-metrics article:nth-child(4) {
    display: none;
  }

  .crm-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .crm-metrics article {
    padding: 10px 8px;
  }

  .crm-metrics span {
    font-size: 8px;
  }

  .crm-metrics strong {
    font-size: 14px;
  }

  .journey-step {
    grid-template-columns: 31px 1fr;
    min-height: 55px;
  }

  .journey-step > i {
    display: none;
  }

  .journey-step > em {
    grid-column: 2;
  }

  .kreova-route {
    grid-template-columns: 58px 1fr 94px;
    gap: 8px;
    padding: 28px 12px 20px;
  }

  .product-node {
    padding: 10px 5px;
  }

  .included-cloud span:nth-child(n+7) {
    display: none;
  }

  .price-card {
    padding-right: 21px;
    padding-left: 21px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Live demo showcase / conversion proof */
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(920px, 100%);
  margin: 20px auto 30px;
}
.hero-proof > * {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}
.hero-proof strong { font-size: 13px; }
.hero-proof span span, .hero-proof a span { color: #6a7890; font-size: 11px; line-height: 1.35; }
.hero-proof a:hover { border-color: #9dbcf6; box-shadow: 0 10px 25px rgba(37,111,244,.08); }

.live-showcase { background: #fff; }
.proof-feature-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  margin-bottom: 42px;
}
.proof-feature {
  overflow: hidden;
  border: 1px solid #d9e3f0;
  border-radius: 20px;
  background: #f8faff;
  box-shadow: 0 18px 46px rgba(38,62,102,.08);
}
.proof-images {
  min-height: 285px;
  padding: 18px 18px 0;
  overflow: hidden;
  background: linear-gradient(145deg,#eaf1ff,#f7f9fd);
}
/*
  The featured apps are shown LIVE, the same way the demo grid is: a still of a
  dashboard whose numbers move is the one image that dates itself, and a
  screenshot has to be retaken every time the app changes. Sized to match the
  image treatment it replaced so the two cards line up.
*/
.proof-frame-shell {
  height: 285px;
  overflow: hidden;
  border: 1px solid rgba(20,32,58,.12);
  border-radius: 11px 11px 0 0;
  background: #fff;
}
/*
  The frame is about 500px wide, which is a PHONE as far as the site inside is
  concerned - so it rendered its mobile layout, hamburger and all, which is the
  opposite of what a showcase should show. Giving it a desktop-width viewport
  and scaling the whole thing down shows the real layout instead.

  The width is a percentage rather than a pixel count so the trick survives
  the breakpoints: at 1/0.45 the scaled result is always exactly 100% of the
  shell, whatever the card happens to be, and 285px / 0.45 gives the height
  back. 0.45 puts the inner viewport around 1440px on a full-width card - a
  real desktop. Scaling harder only buys a wider viewport, which most sites
  answer with bigger empty margins rather than more to look at.
*/
.proof-images iframe.proof-frame {
  display: block;
  width: 222.2222%;
  height: 634px;
  border: 0;
  transform: scale(.45);
  transform-origin: top left;
  pointer-events: none;
}


.proof-images img {
  display: block;
  width: 100%;
  height: 285px;
  object-fit: cover;
  object-position: top left;
  border: 1px solid rgba(20,32,58,.12);
  border-radius: 11px 11px 0 0;
  box-shadow: 0 14px 32px rgba(24,44,82,.15);
}
.proof-images-double { position: relative; }
.proof-images-double img:first-child { width: 76%; }
.proof-images-double img:last-child {
  position: absolute;
  right: 18px;
  bottom: 0;
  width: 47%;
  height: 215px;
  object-position: top center;
  border-radius: 10px 10px 0 0;
}
.proof-feature-copy { padding: 24px; }
.proof-kicker {
  display: inline-flex;
  margin-bottom: 9px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.proof-feature-copy h3 { margin: 0 0 9px; font-size: 24px; line-height: 1.15; }
.proof-feature-copy p { margin: 0; color: #62718a; line-height: 1.6; }
.proof-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0 20px; }
.proof-tags span { padding: 6px 9px; border-radius: 999px; background: #eaf1fd; color: #567096; font-size: 11px; font-weight: 700; }
.proof-button { width: fit-content; }

.showcase-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 18px;
}
.showcase-intro > div { display: grid; gap: 4px; }
.showcase-intro strong { font-size: 18px; }
.showcase-intro span { color: #75839a; font-size: 13px; }
.showcase-live { display: inline-flex; align-items: center; gap: 7px; }
.showcase-live i, .live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #20b56b; box-shadow: 0 0 0 4px rgba(32,181,107,.12); }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.demo-card {
  overflow: hidden;
  border: 1px solid #d9e3f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(34,66,118,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.demo-card:hover { transform: translateY(-4px); border-color: #b8cae5; box-shadow: 0 20px 45px rgba(34,66,118,.12); }
.demo-shot {
  position: relative;
  display: block;
  height: 205px;
  overflow: hidden;
  background: linear-gradient(145deg,#edf3ff,#f7f9fc);
  border-bottom: 1px solid #e1e8f3;
}
.demo-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .35s ease; }
.demo-card:hover .demo-shot img { transform: scale(1.018); }
/* Live lazy iframes replacing the thum.io screenshots: the real site at 4x,
   scaled to 25%, same trick as the dashboard's project cards. pointer-events
   off so clicks land on the card link, not inside someone's demo. */
.demo-shot iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 400%;
  transform: scale(.25);
  transform-origin: top left;
  border: 0;
  display: block;
  background: #fff;
  pointer-events: none;
}
.live-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #23324a;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 5px 18px rgba(20,36,62,.12);
  backdrop-filter: blur(8px);
}
.demo-body { display: grid; gap: 13px; padding: 18px; }
.demo-body h3 { margin: 0 0 5px; font-size: 18px; }
.demo-body p { margin: 0; color: #68768c; font-size: 13px; line-height: 1.5; }
.demo-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; }
.demo-actions a, .demo-actions button {
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.demo-actions button { display: inline-flex; align-items: center; gap: 5px; }
.demo-actions svg { width: 14px; height: 14px; }
.showcase-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid #cddcf4;
  border-radius: 16px;
  background: linear-gradient(135deg,#edf4ff,#f9fbff);
}
.showcase-cta > div { display: grid; gap: 3px; }
.showcase-cta span { color: var(--blue); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.showcase-cta strong { font-size: 19px; }
.showcase-cta p { margin: 0; color: #6a7890; font-size: 13px; }

@media (max-width: 960px) {
  .hero-proof { grid-template-columns: 1fr; }
  .proof-feature-grid { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .proof-images, .proof-images img { min-height: 220px; height: 220px; }
  .proof-images-double img:last-child { height: 165px; }
  .demo-grid { grid-template-columns: 1fr; }
  .demo-shot { height: 210px; }
  .showcase-intro, .showcase-cta { align-items: flex-start; flex-direction: column; }
  .showcase-cta .button { width: 100%; }
}

/* =========================================================================
   Dark hero override: the product's CURRENT hero background - the navy
   surface-dark gradient, sheen and drifting neuron field (hero-field.js)
   from the app - grafted under the v3 hero per the owner's direction.
   Kept at the end of the file so the cascade wins without touching the
   original light design above.
   ========================================================================= */
.hero {
  background:
    radial-gradient(1200px 560px at 78% 0%, rgba(87, 165, 255, 0.42), transparent 60%),
    radial-gradient(900px 520px at 0% 12%, rgba(10, 107, 255, 0.34), transparent 58%),
    linear-gradient(165deg, #0a2c68 0%, #08204a 28%, #06132c 58%, #05070e 100%);
}

/* The soft sheen the app's surface-dark uses, replacing the light veil. */
.hero::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 42%);
}

/* The dark grid variant instead of the light one. */
.hero::before {
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(112, 159, 255, 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 159, 255, 0.34) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}

#hero-field {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-eyebrow {
  border-color: rgba(255, 255, 255, 0.14);
  color: #9fc3ff;
  background: rgba(255, 255, 255, 0.05);
}

.hero-title { color: #fff; }
.hero-title-blue { color: #6db1ff; }
.hero-copy { color: #a7b4cd; }

.prompt-suggestions > span { color: #8fa0bf; }
.prompt-suggestions button {
  border-color: rgba(255, 255, 255, 0.16);
  color: #cdd9ee;
  background: rgba(255, 255, 255, 0.06);
}
.prompt-suggestions button:hover {
  border-color: rgba(157, 188, 246, 0.7);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.hero-proof > * {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #e7edf8;
}
.hero-proof strong { color: #fff; }
.hero-proof span span,
.hero-proof a span { color: #9aa9c4; }
.hero-proof a:hover {
  border-color: rgba(157, 188, 246, 0.65);
  box-shadow: 0 10px 25px rgba(6, 19, 44, 0.5);
}

/* =========================================================================
   Round 2 (owner review): spec-sheet pricing rows, the live-builds marquee,
   the red bump on the usual-way chain, and the builder-style run feed.
   ========================================================================= */

/* Pricing allowance: label left, value right, like a spec sheet. */
.price-allowance {
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
}
.price-allowance span { font-size: 11px; }
.price-allowance b { text-align: right; font-size: 12px; }

/* The live-builds marquee: one seamless track, quick, pauses on hover. */
.demo-marquee { overflow: hidden; }
/* Until the owner's saved cards are in (app.js initShowcase), at most 2.5 s. */
html.js:not(.showcase-ready) .proof-feature-grid,
html.js:not(.showcase-ready) .showcase-intro,
html.js:not(.showcase-ready) .demo-marquee { visibility: hidden; }
/* A showcase section the owner emptied in /admin (app.js initShowcase). */
.proof-feature-grid[hidden],
.showcase-intro[hidden],
.demo-marquee[hidden] { display: none; }
.demo-marquee.is-animated .demo-grid {
  display: flex;
  width: max-content;
  animation: demo-marquee-scroll 70s linear infinite;
}
.demo-marquee.is-animated .demo-card { width: 340px; flex: none; }
/*
  Horizontal gestures come to the strip, vertical ones still scroll the page.
  Without this a drag along the cards would be swallowed by the page instead.
*/
.demo-marquee.is-animated { touch-action: pan-y; }
/* Nothing inside should be selected while a finger is dragging the strip. */
.demo-marquee.is-animated .demo-grid { user-select: none; -webkit-user-select: none; }
.demo-marquee.is-animated:hover .demo-grid { animation-play-state: paused; }
@keyframes demo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-marquee { overflow-x: auto; }
}

/* The usual way: each blocker lands red and bumps, as the old homepage did. */
.journey-step { transition: border-color 0.25s, background 0.25s, opacity 0.3s, transform 0.3s; }
.journey-step.active {
  border-color: #f0b4b4;
  background: #fdf0f0;
  animation: journey-bump 0.45s ease;
}
.journey-step.active b { color: #b42318; }
.journey-step.active em { color: #b42318; }
.journey-step.active .service-icon { color: #d92d20; }
@keyframes journey-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.stack-bills { display: inline-flex; gap: 4px; margin-left: 10px; margin-right: auto; }
.stack-bills i {
  display: grid;
  place-items: center;
  font-size: 15px;
  font-style: normal;
  animation: journey-bump 0.4s ease;
}

/* The run feed: what the real builder streams during a run. */
.run-feed {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e1e9f4;
  border-radius: 12px;
  background: #fff;
}
.feed-status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: #34425d;
}
.feed-status time { margin-left: auto; color: #8391aa; font-size: 11px; font-weight: 500; }
.feed-spinner {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #c4d7f5;
  border-top-color: #256ff4;
  animation: feed-spin 0.9s linear infinite;
}
.feed-status.done .feed-spinner {
  border-color: #12b76a;
  animation: none;
}
@keyframes feed-spin { to { transform: rotate(360deg); } }
.feed-lines { display: grid; gap: 6px; }
.feed-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  color: #6a7890;
  animation: feed-in 0.3s ease;
}
.feed-line b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #34425d;
  white-space: nowrap;
}
.feed-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes feed-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .feed-spinner, .feed-line, .stack-bills i, .journey-step.active { animation: none; }
}


/* =========================================================================
   The hero product mock as the REAL builder: work pane left (lowercase
   tabs, the preview toolbar with the device toggle, the generated site in
   the viewport) and the chat column right (brief, streaming tool lines,
   assistant reply, composer with the credits chip). Replaces the floating
   edit toolbar + build receipt, which was not how the product looks.
   ========================================================================= */
.bmock-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #e5eaf3;
  background: #fff;
  font-size: 11px;
}
.bmock-top strong { color: #1b2940; font-size: 12px; }
.bmock-back { color: #8391aa; }
.bmock-share {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid #d9e2f1;
  border-radius: 999px;
  color: #34425d;
  font-weight: 600;
  font-size: 10px;
}
.bmock-body {
  display: grid;
  grid-template-columns: 1fr 236px;
  background: #fff;
  text-align: left;
}
.bmock-work { border-right: 1px solid #e5eaf3; min-width: 0; }
.bmock-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid #e5eaf3;
}
.bmock-tabs b {
  padding: 3px 9px;
  border-radius: 7px;
  color: #6a7890;
  font-size: 10.5px;
  font-weight: 500;
}
.bmock-tabs b.active { background: #eef2f9; color: #1b2940; font-weight: 600; }
.bmock-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid #e5eaf3;
}
.bmock-toolbar i,
.bmock-toolbar em {
  padding: 3px 8px;
  border: 1px solid #e0e7f2;
  border-radius: 7px;
  color: #6a7890;
  font-size: 9.5px;
  font-style: normal;
}
.bmock-toolbar u {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 7px;
  border: 1px solid #e0e7f2;
  border-radius: 8px;
  color: #8391aa;
  text-decoration: none;
}
.bmock-viewport { padding: 10px; background: #f7f9fd; }
.bmock-viewport .crm-app { margin: 0; }
.bmock-chat {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  background: #fff;
}
.bmock-user {
  padding: 8px 11px;
  border-radius: 11px 11px 3px 11px;
  background: #246ff2;
  color: #fff;
  font-size: 10.5px;
  line-height: 1.45;
}
.bmock-feed { display: grid; gap: 5px; padding: 2px 2px 0; }
.bmock-feed span {
  color: #8391aa;
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bmock-feed b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 600;
  color: #34425d;
}
.bmock-feed .ok { color: #12885c; }
.bmock-assistant {
  padding: 8px 11px;
  border-radius: 11px 11px 11px 3px;
  background: #f1f5fb;
  color: #34425d;
  font-size: 10.5px;
  line-height: 1.45;
}
.bmock-composer {
  margin-top: auto;
  padding: 8px 10px;
  border: 1px solid #dfe6f2;
  border-radius: 11px;
  display: grid;
  gap: 8px;
}
.bmock-composer > span { color: #98a4ba; font-size: 10px; }
.bmock-composer > div { display: flex; align-items: center; gap: 8px; }
.bmock-composer em { color: #8391aa; font-size: 9px; font-style: normal; margin-right: auto; }
.bmock-composer b {
  padding: 4px 12px;
  border-radius: 8px;
  background: #246ff2;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}
@media (max-width: 860px) {
  .bmock-body { grid-template-columns: 1fr; }
  .bmock-work { border-right: 0; border-bottom: 1px solid #e5eaf3; }
}

/* Status labels inside the mock's run feed, and Send sits right without
   the credits chip (an anonymous visitor has no balance to show). */
.bmock-feed .run { color: #246ff2; font-weight: 600; font-size: 9.5px; }
.bmock-composer > div { justify-content: flex-end; }

/* The chat column scrolls INSIDE the frame instead of stretching it: the
   mock's height is the work pane's alone, the conversation overflows with
   a thin scrollbar, and the composer stays pinned at the bottom exactly
   like the product's chat column. */
.bmock-body { position: relative; display: block; }
.bmock-work { margin-right: 236px; border-right: 1px solid #e5eaf3; }
.bmock-chat {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 236px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d3ddec transparent;
}
.bmock-composer {
  position: sticky;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -8px 12px -8px rgba(27, 41, 64, 0.12);
}
@media (max-width: 860px) {
  .bmock-work { margin-right: 0; border-right: 0; }
  .bmock-chat { position: static; width: auto; max-height: 320px; }
}

/* The laptop's task list reads like the product's tool stream. */
.tiny-task b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  font-weight: 600;
  color: #34425d;
}


/* =========================================================================
   Font Awesome shim: every icon is an FA glyph now. The rules below were
   generated from the stylesheet's own `... svg` sizing rules - height
   maps to font-size and the glyph centres in the box the SVG occupied.
   ========================================================================= */
i[class*="fa-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.button i[class*="fa-"] { font-size: 15.5px; height: 18px; width: 18px; }
.menu-button i[class*="fa-"] { font-size: 18.1px; height: 21px; width: 21px; }
.attach-button i[class*="fa-"] { font-size: 12.9px; height: 15px; width: 15px; }
.crm-sidebar a i[class*="fa-"] { font-size: 12.0px; height: 14px; width: 14px; }
.text-link i[class*="fa-"] { font-size: 14.6px; height: 17px; width: 17px; }
.replay-build i[class*="fa-"] { font-size: 18.9px; height: 22px; width: 22px; color: var(--blue); }
.overview-card header i[class*="fa-"] { font-size: 12.0px; height: 14px; width: 14px; color: var(--blue); }
.deploy-icon i[class*="fa-"] { font-size: 16.3px; height: 19px; width: 19px; }
.db-header span i[class*="fa-"] { color: var(--blue); }
.feature-tabs i[class*="fa-"] { font-size: 12.9px; height: 15px; width: 15px; }
.feature-ui-top i[class*="fa-"] { font-size: 13.8px; height: 16px; width: 16px; color: var(--blue); }
.comparison-row > div > i[class*="fa-"] { font-size: 13.8px; height: 16px; width: 16px; color: #8495b1; flex: 0 0 auto; }
.template-link i[class*="fa-"] { font-size: 12.9px; height: 15px; width: 15px; }
.play-button i[class*="fa-"] { font-size: 15.5px; height: 18px; width: 18px; }
.service-icon i[class*="fa-"] { font-size: 13.8px; height: 16px; width: 16px; }
.trust-icon i[class*="fa-"] { font-size: 18.1px; height: 21px; width: 21px; }
.pricing-notes i[class*="fa-"] { font-size: 12.0px; height: 14px; width: 14px; }
.faq-item > button i[class*="fa-"] { font-size: 17.2px; height: 20px; width: 20px; color: #78869d; flex: 0 0 auto; }
.demo-actions i[class*="fa-"] { font-size: 12.0px; height: 14px; width: 14px; }

/* All three plan cards stand the same height: stretch to the tallest
   instead of each stopping at its own feature list. */
.pricing-grid { align-items: stretch; }

/* The menu/close swap must outrank the FA shim's display: inline-flex. */
.menu-button .menu-close-icon { display: none; }
.menu-button[aria-expanded="true"] .menu-open-icon { display: none; }
.menu-button[aria-expanded="true"] .menu-close-icon { display: inline-flex; }

/* Air between the brief and the run feed in the build demo. */
.demo-chat-pane .run-feed { margin-top: 16px; }
.demo-chat-pane .chat-bubble + .run-feed { margin-top: 16px; }

/* Rotating second headline line, and a quieter hero subline. */
.hero-title-blue { transition: opacity 0.42s ease; }
.hero-title-blue.rotating-out { opacity: 0; }
.hero-copy { font-size: clamp(0.95rem, 1.4vw, 1.08rem); }

/* The owner-supplied logo image replaces the CSS-drawn mark (2026-08-24). */
.brand-logo { display: block; height: 34px; width: auto; }

/* Hero headline at the scale competitors use: present, not billboard.
   Was clamp(3.2rem, 6.3vw, 6rem) - three lines filling the fold. */
.hero-title {
  font-size: clamp(2.2rem, 3.4vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.hero-title-blue { margin-top: 4px; }

/* The real mark replaces the CSS-drawn mini robots in the comparison
   table and the with-Kreova card. */
.mini-logo-img { width: 22px; height: 22px; object-fit: contain; }
.mini-logo-img.large { width: 34px; height: 34px; }

/* Mobile-only back-to-top. Hidden on desktop entirely; on phones it fades in
   once the visitor is a screen and a half down, below the header (1000) and
   mobile nav so an open menu always covers it. */
.back-to-top {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--blue);
  font-size: 16px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.back-to-top.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (max-width: 720px) {
  .back-to-top {
    display: grid;
    place-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Integrations band: full-bleed rows of the services an app can actually be
   wired to. Three rows drifting at different speeds, the middle one against
   the other two, so the eye reads it as a surface of options rather than a
   list to finish.

   Pure CSS, and the items are duplicated in the HTML rather than cloned by
   script: this sits directly below the hero, and a strip that only moves once
   JavaScript has run is a strip that is visibly broken on a slow connection.
--------------------------------------------------------------------------- */
.integrations-section {
  padding: 76px 0 72px;
  background: linear-gradient(180deg, #101a30 0%, #17233d 100%);
  overflow: hidden;
}
.integrations-section .section-heading h2 { color: #fff; }
.integrations-section .section-heading > p { color: rgba(226, 234, 250, 0.78); }
.integrations-section .eyebrow { color: #9ec2ff; }
.integrations-section .eyebrow span { background: #9ec2ff; }

.integration-rows {
  display: grid;
  gap: 14px;
  margin: 34px 0 30px;
}
/*
  Faded ends rather than a hard cut. A loop has to be clipped somewhere, and
  clipped mid-pill it reads as a broken layout; faded, the row reads as
  continuing past the screen, which is what it does. This is the "padding" the
  edges were missing - real padding would only move the cut inwards.
*/
.integration-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.integration-track {
  display: flex;
  gap: 14px;
  width: max-content;
  /*
    Durations are set FROM the track length to hold ~30, 25 and 23 px a second.
    Adding items lengthens the track, so a fixed duration silently speeds the
    row back up: the first pass at this drifted to 38px/s just by gaining
    capability chips. If the rows change again, recompute from half-width.
  */
  animation: integration-drift 118s linear infinite;
}
.integration-row-2 .integration-track { animation-duration: 139s; animation-direction: reverse; }
.integration-row-3 .integration-track { animation-duration: 132s; }
/* Hovering anywhere over the band holds all three, so a logo can be read. */
.integration-rows:hover .integration-track { animation-play-state: paused; }

@keyframes integration-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.integration-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 13px 22px;
  border-radius: 999px;
  background: #fff;
  color: #16223c;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(6, 14, 30, 0.22);
}
/*
  Capability chips sit beside the vendor marks, the way the reference does it:
  a tinted rounded square with a glyph, so a thing Kreova DOES reads at the same
  weight as a thing it connects to. Font Awesome is already on the page, so no
  new asset per capability.

  Tints stay off violet, indigo and the warm-earth family - the house rules for
  anything that could read as another AI tool's branding.
*/
.integration-pill .pill-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 12px;
  flex: none;
}
.pill-blue  { background: #e3edff; color: #1c5cd8; }
.pill-sky   { background: #dff2fb; color: #0f7ea6; }
.pill-green { background: #dcf5e7; color: #12805a; }
.pill-amber { background: #fdf0d8; color: #a8710d; }
.pill-rose  { background: #fde4e6; color: #bf2b3f; }
.pill-teal  { background: #d9f3ef; color: #0d7a72; }

.integration-pill img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.integrations-note {
  margin: 0 auto;
  max-width: 640px;
  text-align: center;
  font-size: 14px;
  color: rgba(226, 234, 250, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing moves: the rows wrap and sit still, all of them readable. */
  .integration-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
  /* No fade either - nothing is running off the edge to fade into. */
  .integration-row {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0 20px;
  }
}

@media (max-width: 640px) {
  .integrations-section { padding: 56px 0 52px; }
  .integration-pill { padding: 11px 17px; font-size: 14px; }
  .integration-pill img { width: 20px; height: 20px; }
}

/*
 * The yearly price, as a quiet second line under the monthly one (owner
 * 2026-09-29: "Don't make it default anything on the homepage, we just want it
 * somewhere"). The annual amount only, never a per-month figure. Two lines are
 * reserved on every card, Free included (an invisible spacer), so the buttons
 * and lists below stay level across the row.
 */
.price-yearly {
  min-height: 34px;
  margin: -19px 0 16px;
  color: #7d8ba3;
  font-size: 11px;
  line-height: 1.5;
}

.price-yearly b {
  color: #1b2940;
  font-weight: 650;
}

.price-yearly em {
  margin-left: 4px;
  color: #0f8a5f;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.price-card.power .price-yearly { color: #8291aa; }
.price-card.power .price-yearly b { color: #fff; }
.price-card.power .price-yearly em { color: #5fd3a2; }
.price-yearly-spacer { visibility: hidden; }