:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #182033;
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --text: #182033;
  --muted: #687188;
  --light: #929aab;
  --surface: #fff;
  --subtle: #f5f7fb;
  --border: #e1e5ed;
  --blue: #3154d9;
  --blue-dark: #2746bf;
  --blue-soft: #edf1ff;
  --navy: #101a34;
  --green: #24a85a;
  --shadow: 0 24px 70px rgba(31, 47, 91, .12);
}

* { box-sizing: border-box; }
html { min-width: 360px; scroll-behavior: smooth; scroll-padding-top: 92px; }
body { min-width: 360px; margin: 0; overflow-x: hidden; background: #fff; }
button, a { font: inherit; }
a { color: inherit; }
img, svg { display: block; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.container { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.narrow { width: min(1080px, calc(100% - 48px)); }
.section { padding: 112px 0; }
.section-tint { background: linear-gradient(180deg, #f7f9fd 0%, #f2f5fb 100%); }

.site-header { position: fixed; z-index: 100; top: 0; right: 0; left: 0; border-bottom: 1px solid transparent; transition: background .2s ease, box-shadow .2s ease, border-color .2s ease; }
.site-header.scrolled { border-color: rgba(218, 224, 236, .85); background: rgba(255,255,255,.9); box-shadow: 0 8px 30px rgba(32,47,86,.06); backdrop-filter: blur(16px); }
.header-inner { display: flex; height: 76px; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.brand img { width: 122px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 29px; margin-left: auto; }
.desktop-nav a { position: relative; color: #59647d; font-size: 13px; font-weight: 600; text-decoration: none; }
.desktop-nav a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; border-radius: 10px; background: var(--blue); content: ""; transform: scaleX(0); transition: transform .18s ease; }
.desktop-nav a:hover { color: var(--text); }
.desktop-nav a:hover::after { transform: scaleX(1); }
.header-cta { margin-left: 8px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 750; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-2px); }
.button svg { width: 18px; height: 18px; }
.button-small { min-height: 42px; padding-inline: 18px; font-size: 12px; }
.button-primary { color: #fff; background: linear-gradient(135deg, #3a63ef, #294bd0); box-shadow: 0 10px 24px rgba(49,84,217,.24); }
.button-primary:hover { box-shadow: 0 14px 30px rgba(49,84,217,.32); }
.button-secondary { color: #26314c; border-color: #d6ddeb; background: #fff; box-shadow: 0 7px 20px rgba(28,39,71,.05); }
.button-secondary:hover { border-color: #b7c5eb; }
.menu-button { display: none; width: 42px; height: 42px; place-items: center; padding: 0; color: #43506c; border: 1px solid var(--border); border-radius: 9px; background: #fff; cursor: pointer; }
.mobile-nav { display: none; }

.hero { position: relative; overflow: hidden; min-height: 760px; padding: 145px 0 90px; background: radial-gradient(circle at 82% 22%, rgba(88,125,238,.14), transparent 27%), linear-gradient(180deg,#fbfcff 0%,#fff 76%); }
.hero::before { position: absolute; top: 76px; right: -170px; width: 620px; height: 620px; border: 1px solid rgba(70,102,219,.1); border-radius: 50%; content: ""; box-shadow: 0 0 0 90px rgba(72,105,223,.025), 0 0 0 180px rgba(72,105,223,.018); }
.hero-grid { position: relative; display: grid; align-items: center; grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr); gap: 72px; }
.product-lockup { display: flex; align-items: center; gap: 11px; margin-bottom: 27px; }
.product-lockup img { width: 38px; height: 38px; }
.product-lockup span { color: #17213a; font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.product-lockup em { margin-left: 5px; padding: 5px 8px; color: var(--blue); border-radius: 6px; background: var(--blue-soft); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .09em; }
.hero h1 { max-width: 650px; margin: 0; color: #111b34; font-size: clamp(44px,5vw,68px); line-height: 1.04; letter-spacing: -.055em; }
.hero-lead { max-width: 620px; margin: 25px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.status-list { display: flex; flex-wrap: wrap; gap: 19px; margin: 27px 0 0; padding: 0; list-style: none; }
.status-list li { display: inline-flex; align-items: center; gap: 8px; color: #69748d; font-size: 11px; font-weight: 650; }
.status-list li span { width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #35b96b; box-shadow: 0 0 0 3px #def5e7; }
.hero-visual { position: relative; min-width: 0; padding: 42px 0 42px 20px; }
.browser-placeholder { position: relative; z-index: 2; overflow: hidden; border: 1px solid #dce3f0; border-radius: 16px; background: #fff; box-shadow: 0 35px 90px rgba(30,50,104,.2); transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.browser-bar { display: flex; height: 42px; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid #e5e9f1; background: #fafbfe; }
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d7ddea; }
.browser-bar span { margin-left: 9px; color: #8791a8; font-size: 9px; }
.placeholder-canvas { display: grid; min-height: 365px; grid-template-columns: 78px 1fr; background: linear-gradient(135deg,#fbfcff,#f3f6fc); }
.placeholder-sidebar { display: grid; align-content: start; justify-items: center; gap: 23px; padding: 20px 13px; border-right: 1px solid #e1e6ef; background: #fff; }
.placeholder-sidebar img { width: 28px; }
.placeholder-sidebar b { width: 28px; height: 7px; border-radius: 10px; background: #e8ecf4; }
.placeholder-sidebar b:nth-of-type(1) { margin-top: 18px; background: #dce5ff; }
.placeholder-content { padding: 27px 25px; }
.placeholder-title { display: grid; gap: 8px; }
.placeholder-title b { width: 42%; height: 20px; border-radius: 5px; background: #cfd7e7; }
.placeholder-title span { width: 57%; height: 8px; border-radius: 5px; background: #e3e8f1; }
.placeholder-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 26px 0 18px; }
.placeholder-stats i { height: 64px; border: 1px solid #e0e5ef; border-radius: 9px; background: #fff; }
.placeholder-stats i::after { display: block; width: 34%; height: 12px; margin: 16px; border-radius: 5px; background: #e9edfa; content: ""; }
.placeholder-table { overflow: hidden; border: 1px solid #e1e5ee; border-radius: 9px; background: #fff; }
.placeholder-table span { display: block; height: 45px; border-bottom: 1px solid #e7eaf1; }
.placeholder-table span::before { display: block; width: 56%; height: 7px; margin: 18px 15px; border-radius: 6px; background: #e2e6ef; content: ""; }
.media-label { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 18px; border-top: 1px solid #e4e8f0; background: #fff; }
.media-label strong { font-size: 11px; }.media-label span { color: var(--light); font-size: 9px; }
.hero-product-image { display: block; width: 100%; height: auto; background: #f6f8fd; }
.screenshot-trigger { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; color: inherit; border: 0; background: transparent; cursor: zoom-in; }.screenshot-trigger img { transition: transform .35s cubic-bezier(.2,.75,.25,1), filter .35s ease; }.screenshot-trigger:hover img { filter: brightness(.94); transform: scale(1.012); }.screenshot-trigger:focus-visible { outline: 3px solid rgba(49,84,217,.38); outline-offset: -3px; }.zoom-hint { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 8px; padding: 10px 13px; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; background: rgba(18,29,59,.78); box-shadow: 0 12px 30px rgba(14,26,61,.22); font-size: 10px; font-weight: 750; opacity: 0; pointer-events: none; transform: translate(-50%,-42%); transition: opacity .2s ease, transform .2s ease; backdrop-filter: blur(9px); }.zoom-hint svg { width: 16px; height: 16px; }.screenshot-trigger:hover .zoom-hint,.screenshot-trigger:focus-visible .zoom-hint { opacity: 1; transform: translate(-50%,-50%); }
.float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid rgba(215,223,238,.9); border-radius: 11px; background: rgba(255,255,255,.94); box-shadow: 0 15px 35px rgba(30,47,92,.14); backdrop-filter: blur(10px); }
.float-card svg { width: 20px; height: 20px; color: var(--blue); }.float-card div { display: grid; gap: 2px; }.float-card strong { font-size: 11px; }.float-card span { color: var(--muted); font-size: 9px; }
.float-card-one { top: 10px; right: -20px; }.float-card-two { bottom: 3px; left: -18px; }
.visual-orbit { position: absolute; border: 1px solid rgba(54,91,217,.11); border-radius: 50%; }.orbit-one { top: 0; right: -80px; width: 280px; height: 280px; }.orbit-two { bottom: 0; left: -60px; width: 180px; height: 180px; }

.section-heading { max-width: 720px; margin-bottom: 48px; }.section-heading.centered { margin-right: auto; margin-left: auto; text-align: center; }.section-heading h2 { margin: 8px 0 13px; color: #121c35; font-size: clamp(34px,4vw,48px); line-height: 1.1; letter-spacing: -.045em; }.section-heading p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }.eyebrow { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .13em; }.eyebrow.light { color: #9eb4ff; }
.demo-section { padding: 35px 0 110px; }.video-placeholder { position: relative; display: grid; width: 100%; aspect-ratio: 16/9; overflow: hidden; place-items: center; padding: 0; color: #fff; border: 1px solid #dce3f0; border-radius: 18px; background: linear-gradient(135deg,#17264e 0%,#2945a8 56%,#4267ed 100%); box-shadow: 0 28px 65px rgba(24,47,119,.2); cursor: pointer; }.video-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom right,#000,transparent); }.video-shine { position: absolute; top: -30%; right: -4%; width: 45%; height: 160%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); transform: rotate(20deg); }.play-button { position: relative; display: grid; width: 82px; height: 82px; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(255,255,255,.18); box-shadow: 0 15px 35px rgba(8,20,57,.24); backdrop-filter: blur(12px); transition: transform .2s ease, background .2s ease; }.play-button svg { width: 31px; height: 31px; margin-left: 4px; fill: #fff; stroke: #fff; }.video-placeholder:hover .play-button { background: rgba(255,255,255,.28); transform: scale(1.08); }.video-caption { position: absolute; right: 24px; bottom: 22px; left: 24px; display: flex; align-items: center; justify-content: space-between; gap: 15px; text-align: left; }.video-caption strong { font-size: 13px; }.video-caption small { color: rgba(255,255,255,.68); font-size: 10px; }.demo-note { margin: 17px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.product-video { overflow: hidden; scroll-margin-top: 105px; border: 1px solid #dce3f0; border-radius: 18px; background: #0a1020; box-shadow: 0 28px 65px rgba(24,47,119,.2); }.product-video video { display: block; width: 100%; aspect-ratio: 16/9; background: #0a1020; object-fit: contain; }

.flow { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }.flow::before { position: absolute; top: 44px; right: 9%; left: 9%; height: 1px; background: linear-gradient(90deg,transparent,#cbd6f4 10%,#cbd6f4 90%,transparent); content: ""; }.flow li { position: relative; z-index: 1; padding: 0 8px; text-align: center; }.flow-number { position: absolute; top: 2px; right: 10px; color: #bac4db; font-size: 9px; font-weight: 800; }.icon-box { display: grid; width: 58px; height: 58px; margin: 14px auto 18px; place-items: center; color: var(--blue); border: 1px solid #dbe4ff; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(39,69,161,.08); }.icon-box svg { width: 25px; height: 25px; }.flow h3 { margin: 0 0 8px; font-size: 14px; }.flow p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.feature-card { min-height: 250px; padding: 26px; border: 1px solid #dfe4ed; border-radius: 15px; background: rgba(255,255,255,.92); box-shadow: 0 8px 30px rgba(29,42,76,.045); transition: transform .42s cubic-bezier(.2,.75,.25,1), box-shadow .42s ease, border-color .42s ease, background-color .42s ease; }.feature-card:hover { border-color: #b7c6f2; background-color: #f9fbff; box-shadow: 0 18px 44px rgba(36,61,130,.12); transform: translateY(-4px); }.feature-card .icon-box { width: 49px; height: 49px; margin: 0 0 25px; border: 0; box-shadow: none; transition: transform .42s cubic-bezier(.2,.75,.25,1), box-shadow .42s ease; }.feature-card:hover .icon-box { box-shadow: 0 10px 24px rgba(49,84,217,.12); transform: translateY(-2px); }.icon-box.blue { background: #edf2ff; }.icon-box.violet { color: #7855e8; background: #f0ecff; }.icon-box.green { color: #28a65b; background: #e8f8ee; }.icon-box.orange { color: #dc931a; background: #fff3db; }.feature-card h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.02em; }.feature-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }.feature-card > span { display: inline-flex; margin-top: 22px; padding: 6px 8px; color: var(--blue); border-radius: 6px; background: var(--blue-soft); font-size: 9px; font-weight: 750; }

.interface-section { overflow: hidden; }.showcase { display: grid; align-items: center; grid-template-columns: 330px minmax(0,1fr); gap: 54px; margin-top: 72px; }.showcase.reverse { grid-template-columns: minmax(0,1fr) 330px; }.showcase.reverse .showcase-copy { order: 2; }.showcase-copy > span { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .12em; }.showcase-copy h3 { margin: 11px 0 13px; font-size: 28px; line-height: 1.15; letter-spacing: -.035em; }.showcase-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }.showcase-copy ul { display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; }.showcase-copy li { position: relative; padding-left: 20px; color: #46516b; font-size: 11px; }.showcase-copy li::before { position: absolute; top: 2px; left: 0; width: 11px; height: 6px; border-bottom: 2px solid var(--blue); border-left: 2px solid var(--blue); content: ""; transform: rotate(-45deg); }.screenshot-placeholder { position: relative; display: grid; overflow: hidden; place-items: center; border: 1px solid #d9e0ec; border-radius: 16px; background: linear-gradient(135deg,#f8faff,#eef2f9); box-shadow: 0 24px 60px rgba(31,50,101,.13); }.screenshot-placeholder.landscape { aspect-ratio: 16/9; }.screenshot-placeholder::before { position: absolute; inset: 0; opacity: .4; background-image: radial-gradient(circle at 75% 20%,rgba(73,106,224,.2),transparent 30%),linear-gradient(rgba(83,106,166,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(83,106,166,.08) 1px,transparent 1px); background-size: auto,30px 30px,30px 30px; content: ""; }.screenshot-placeholder > div { position: relative; display: grid; justify-items: center; gap: 8px; color: #56627b; }.screenshot-placeholder > div svg { width: 29px; height: 29px; color: var(--blue); }.screenshot-placeholder strong { font-size: 13px; }.screenshot-placeholder small { color: var(--light); font-size: 10px; }.placeholder-index { position: absolute; top: 18px; left: 20px; color: #aab5ca; font-size: 10px; font-weight: 800; }.mobile-showcase { display: grid; align-items: center; grid-template-columns: 330px 1fr; gap: 70px; margin-top: 100px; padding: 48px 55px; border: 1px solid #dce3ef; border-radius: 19px; background: linear-gradient(135deg,#f3f6ff,#fff 70%); }.mobile-copy h3 { margin: 10px 0 13px; font-size: 29px; line-height: 1.16; letter-spacing: -.04em; }.mobile-copy p { color: var(--muted); font-size: 13px; line-height: 1.7; }.responsive-badge { display: inline-flex; align-items: center; gap: 9px; margin-top: 13px; padding: 9px 12px; color: var(--blue); border-radius: 8px; background: #e9efff; }.responsive-badge svg { width: 17px; height: 17px; }.responsive-badge span { font-size: 13px; font-weight: 500; }.phone-row { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }.phone-placeholder { position: relative; display: grid; width: 150px; aspect-ratio: 9/18.5; place-items: center; padding: 12px; border: 5px solid #202b45; border-radius: 24px; background: linear-gradient(160deg,#fff,#edf2fb); box-shadow: 0 18px 38px rgba(20,35,76,.18); text-align: center; }.phone-placeholder.elevated { transform: translateY(-18px); }.phone-placeholder > i { position: absolute; top: 6px; width: 42px; height: 4px; border-radius: 8px; background: #202b45; }.phone-placeholder div { display: grid; gap: 5px; }.phone-placeholder strong { font-size: 9px; }.phone-placeholder small { color: var(--light); font-size: 7px; }
.product-screenshot { position: relative; overflow: hidden; margin: 0; border: 1px solid #d9e0ec; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(31,50,101,.13); }.product-screenshot img { display: block; width: 100%; height: auto; }.product-screenshot figcaption { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 8px 11px; color: #3c4862; border: 1px solid rgba(215,224,240,.95); border-radius: 8px; background: rgba(255,255,255,.9); box-shadow: 0 7px 20px rgba(31,50,101,.1); backdrop-filter: blur(10px); font-size: 9px; font-weight: 700; }.product-screenshot figcaption span { color: var(--blue); }
.mobile-shot { width: min(31%,180px); flex: 0 1 180px; overflow: visible; border-radius: 25px; filter: drop-shadow(0 20px 25px rgba(20,35,76,.15)); }.mobile-shot.elevated { transform: translateY(-18px); }.mobile-shot img { display: block; width: 100%; height: auto; }.mobile-shot:hover img { filter: brightness(.96); transform: scale(1.025); }
.lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 24px; overflow: hidden; color: #fff; border: 0; background: rgba(8,14,30,.93); opacity: 0; transition: opacity .22s ease, display .22s allow-discrete, overlay .22s allow-discrete; }.lightbox[open] { display: grid; grid-template-rows: minmax(0,1fr) auto; opacity: 1; }.lightbox::backdrop { background: rgba(8,14,30,.72); backdrop-filter: blur(8px); }.lightbox-stage { display: grid; min-height: 0; place-items: center; }.lightbox-stage img { display: block; max-width: 100%; max-height: calc(100dvh - 78px); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; box-shadow: 0 28px 80px rgba(0,0,0,.42); }.lightbox-close { position: fixed; z-index: 2; top: 20px; right: 20px; display: grid; width: 42px; height: 42px; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(20,31,59,.75); cursor: pointer; backdrop-filter: blur(8px); transition: background .2s ease, transform .2s ease; }.lightbox-close:hover { background: rgba(50,71,125,.9); transform: scale(1.04); }.lightbox-close svg { width: 20px; height: 20px; }.lightbox > p { margin: 10px 52px 0; color: #c7d0e5; font-size: 11px; text-align: center; }
@starting-style { .lightbox[open] { opacity: 0; } }

.section-dark { position: relative; overflow: hidden; color: #fff; background: #111b34; }.section-dark::before { position: absolute; top: -240px; left: -120px; width: 580px; height: 580px; border-radius: 50%; background: rgba(49,84,217,.24); filter: blur(100px); content: ""; }.acquisition-grid { position: relative; display: grid; align-items: center; grid-template-columns: .8fr 1.2fr; gap: 90px; }.section-dark .section-heading { margin: 0; }.section-dark h2 { color: #fff; }.section-dark .section-heading p { color: #aeb8ce; }.truth-note { display: flex; gap: 10px; margin-top: 26px; padding: 13px; color: #b9c6e3; border: 1px solid rgba(137,160,225,.2); border-radius: 9px; background: rgba(255,255,255,.04); font-size: 10px; line-height: 1.5; }.truth-note svg { width: 17px; height: 17px; flex: 0 0 auto; color: #68d493; }.deliverables { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.deliverables > div { display: flex; min-height: 82px; align-items: center; gap: 13px; padding: 16px; border: 1px solid rgba(151,168,211,.17); border-radius: 11px; background: rgba(255,255,255,.055); }.deliverables > div > svg { width: 23px; height: 23px; flex: 0 0 auto; color: #85a3ff; }.deliverables span { display: grid; gap: 4px; }.deliverables strong { font-size: 12px; }.deliverables small { color: #9eabc6; font-size: 9px; }.deliverables .deliverable-pending { border-style: dashed; opacity: .72; }
.deliverables .deliverable-wide { grid-column: 1/-1; }
.stack-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.stack-grid > div { display: grid; min-height: 135px; align-content: center; gap: 7px; padding: 22px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: 0 8px 25px rgba(29,42,76,.04); }.stack-grid span { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .1em; }.stack-grid strong { font-size: 18px; }.stack-grid small { color: var(--muted); font-size: 10px; }.architecture { display: grid; align-items: center; grid-template-columns: 300px 1fr; gap: 55px; margin-top: 45px; padding: 35px; border: 1px solid #dce3ef; border-radius: 17px; background: #f8faff; }.architecture-copy h3 { margin: 9px 0 10px; font-size: 23px; letter-spacing: -.03em; }.architecture-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }.architecture-flow { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }.architecture-flow > div { display: grid; min-width: 104px; justify-items: center; gap: 9px; padding: 14px 10px; border: 1px solid #dce3ef; border-radius: 10px; background: #fff; text-align: center; }.architecture-flow > div > svg { width: 20px; height: 20px; color: var(--blue); }.architecture-flow span { display: grid; gap: 2px; }.architecture-flow strong { font-size: 9px; }.architecture-flow small { color: var(--muted); font-size: 7px; }.architecture-flow > i svg { width: 15px; color: #9aa7c1; }

.state-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.state-card { padding: 30px; border: 1px solid #dce3ed; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(29,42,76,.055); }.state-card.ready { border-top: 3px solid #37b66a; }.state-card.growth { border-top: 3px solid #4d6ee8; }.state-title { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid #e5e9f0; }.state-title > span { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 11px; }.ready .state-title > span { color: #279f58; background: #e9f8ef; }.growth .state-title > span { color: var(--blue); background: var(--blue-soft); }.state-title svg { width: 20px; height: 20px; }.state-title small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }.state-title h3 { margin: 4px 0 0; font-size: 21px; }.state-card ul { display: grid; gap: 12px; margin: 23px 0 0; padding: 0; list-style: none; }.state-card li { position: relative; padding-left: 22px; color: #4f5a72; font-size: 12px; }.state-card li::before { position: absolute; top: 3px; left: 1px; width: 10px; height: 6px; border-bottom: 2px solid #42af6b; border-left: 2px solid #42af6b; content: ""; transform: rotate(-45deg); }.growth li::before { border-color: #5371df; }
.sale-reason { padding: 80px 0; background: #fff; }.reason-card { display: grid; align-items: center; grid-template-columns: 110px 1fr; gap: 35px; padding: 36px 46px; border: 1px solid #dce3ef; border-radius: 18px; background: linear-gradient(135deg,#f8faff,#fff); box-shadow: 0 18px 50px rgba(29,45,91,.07); }.reason-mark { display: grid; width: 94px; height: 94px; place-items: center; border-radius: 23px; background: linear-gradient(145deg,#e9efff,#f7f9ff); }.reason-mark img { width: 52px; }.reason-card h2 { margin: 8px 0 10px; font-size: 30px; letter-spacing: -.04em; }.reason-card p { max-width: 850px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.audience-section { padding-top: 65px; }.audience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.audience-grid article { position: relative; min-height: 260px; padding: 28px; overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: #fff; }.audience-grid article > span { position: absolute; top: 17px; right: 20px; color: #e3e7ef; font-size: 38px; font-weight: 800; }.audience-grid .icon-box { margin: 0 0 25px; }.audience-grid h3 { max-width: 260px; margin: 0 0 11px; font-size: 19px; line-height: 1.25; }.audience-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.final-cta { padding: 15px 0 100px; }.cta-card { position: relative; display: grid; overflow: hidden; justify-items: center; padding: 75px 35px; color: #fff; border-radius: 22px; background: linear-gradient(135deg,#172653,#294cc9 65%,#3b62eb); box-shadow: 0 28px 70px rgba(28,57,151,.25); text-align: center; }.cta-card > *:not(.cta-glow) { position: relative; }.cta-card > img { width: 52px; margin-bottom: 18px; padding: 9px; border-radius: 13px; background: #fff; }.cta-card h2 { max-width: 740px; margin: 10px 0 14px; font-size: clamp(34px,4vw,50px); line-height: 1.08; letter-spacing: -.045em; }.cta-card > p { max-width: 680px; margin: 0; color: #cbd6f5; font-size: 14px; line-height: 1.65; }.contact-placeholder { display: flex; align-items: center; gap: 12px; margin: 27px 0 18px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: rgba(255,255,255,.07); }.contact-links a { display: grid; gap: 3px; padding: 2px 10px; color: #fff; text-align: left; text-decoration: none; }.contact-links a + a { border-left: 1px solid rgba(255,255,255,.2); }.contact-links strong { font-size: 13px; }.contact-links span { color: #c7d3f4; font-size: 13px; }.button-white { color: #2449c7; border: 0; background: #fff; box-shadow: 0 12px 30px rgba(7,21,66,.2); }.cta-glow { position: absolute; top: -180px; right: -120px; width: 500px; height: 500px; border-radius: 50%; background: rgba(118,150,255,.35); filter: blur(80px); }
footer { border-top: 1px solid var(--border); background: #fff; }.footer-inner { display: flex; min-height: 90px; align-items: center; gap: 24px; }.footer-inner span,.footer-inner > a:not(.brand) { color: var(--muted); font-size: 12px; text-decoration: none; }.footer-inner span:nth-of-type(1) { margin-left: auto; }.footer-inner > a:not(.brand):hover { color: var(--blue); }
.toast { position: fixed; z-index: 200; right: 24px; bottom: 24px; max-width: calc(100% - 48px); padding: 13px 16px; color: #fff; border-radius: 9px; background: #17213a; box-shadow: 0 15px 40px rgba(16,28,62,.25); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }.toast.visible { opacity: 1; transform: translateY(0); }

/* Readable lower bound for supporting copy and interface labels. */
.desktop-nav a,.mobile-nav nav > a:not(.button) { font-size: 14px; }
.button-small,.demo-note,.toast { font-size: 14px; }
.browser-bar span,.media-label span,.float-card span,.flow-number,.feature-card > span,.product-screenshot figcaption,.stack-grid span,.stack-grid small,.architecture-flow strong,.architecture-flow small,.state-title small,.contact-placeholder span,.footer-inner span { font-size: 12px; }
.media-label strong,.float-card strong,.zoom-hint,.responsive-badge strong,.lightbox > p,.truth-note,.deliverables small,.contact-placeholder strong { font-size: 13px; }
.flow h3 { font-size: 16px; }.flow p,.showcase-copy li,.architecture-copy p,.state-card li { font-size: 14px; }
.feature-card p,.showcase-copy p,.mobile-copy p,.reason-card p,.audience-grid p { font-size: 15px; }
.deliverables strong { font-size: 15px; }
.cta-card > p { font-size: 16px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1); }.reveal.visible { opacity: 1; transform: translateY(0); }.feature-grid .reveal:nth-child(2),.audience-grid .reveal:nth-child(2) { transition-delay: .08s; }.feature-grid .reveal:nth-child(3),.audience-grid .reveal:nth-child(3) { transition-delay: .16s; }.feature-grid .reveal:nth-child(5) { transition-delay: .08s; }.feature-grid .reveal:nth-child(6) { transition-delay: .16s; }

@media (max-width: 1100px) {
  .desktop-nav { gap: 18px; }.hero-grid { grid-template-columns: minmax(0,.9fr) minmax(450px,1.1fr); gap: 35px; }.hero h1 { font-size: 52px; }.flow { grid-template-columns: repeat(5,1fr); gap: 6px; }.showcase { grid-template-columns: 270px 1fr; gap: 34px; }.showcase.reverse { grid-template-columns: 1fr 270px; }.mobile-showcase { grid-template-columns: 280px 1fr; gap: 30px; padding-inline: 35px; }.phone-placeholder { width: 128px; }.architecture { grid-template-columns: 1fr; }.architecture-flow { justify-content: center; }.acquisition-grid { gap: 45px; }
}
@media (max-width: 900px) {
  .desktop-nav,.header-cta { display: none; }.menu-button { display: grid; margin-left: auto; }.mobile-nav { overflow: hidden; max-height: 0; border-top: 1px solid transparent; background: rgba(255,255,255,.97); transition: max-height .25s ease,border-color .25s ease; backdrop-filter: blur(16px); }.mobile-nav.open { max-height: 360px; border-color: var(--border); }.mobile-nav nav { display: grid; gap: 0; padding: 12px 0 20px; }.mobile-nav nav > a:not(.button) { padding: 12px 3px; color: #4e5a73; font-size: 13px; text-decoration: none; }.mobile-nav .button { margin-top: 10px; }
  .hero { min-height: 0; padding-top: 120px; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { max-width: 720px; }.hero h1 { max-width: 780px; font-size: clamp(44px,8vw,64px); }.hero-visual { max-width: 720px; margin: 10px auto 0; padding-inline: 25px; }.flow { grid-template-columns: repeat(3,1fr); gap: 28px 10px; }.flow::before { display: none; }.feature-grid { grid-template-columns: 1fr 1fr; }.showcase,.showcase.reverse { grid-template-columns: 1fr; }.showcase .showcase-copy,.showcase.reverse .showcase-copy { order: 0; max-width: 600px; }.mobile-showcase { grid-template-columns: 1fr; }.phone-row { justify-content: center; }.acquisition-grid { grid-template-columns: 1fr; }.section-dark .section-heading { max-width: 680px; }.stack-grid { grid-template-columns: 1fr 1fr; }.architecture-flow { flex-wrap: wrap; }.architecture-flow > i:nth-of-type(2),.architecture-flow > i:nth-of-type(4) { display: none; }.state-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container,.narrow { width: min(100% - 32px,1240px); }.section { padding: 78px 0; }.header-inner { height: 66px; }.brand img { width: 112px; }.hero { padding: 105px 0 65px; }.hero-grid { gap: 38px; }.product-lockup { margin-bottom: 20px; }.hero h1 { font-size: clamp(38px,12vw,53px); }.hero-lead { font-size: 15px; }.hero-actions { display: grid; }.hero-actions .button { width: 100%; }.status-list { gap: 12px 17px; }.hero-visual { padding: 25px 5px; }.browser-placeholder { transform: none; }.placeholder-canvas { min-height: 265px; grid-template-columns: 52px 1fr; }.placeholder-sidebar { padding-inline: 8px; }.placeholder-sidebar img { width: 24px; }.placeholder-content { padding: 18px 14px; }.placeholder-stats i { height: 48px; }.placeholder-table span { height: 35px; }.placeholder-table span::before { margin-block: 14px; }.media-label { align-items: flex-start; flex-direction: column; }.float-card { display: none; }.section-heading { margin-bottom: 34px; }.section-heading h2 { font-size: 35px; }.demo-section { padding-bottom: 75px; }.video-placeholder { border-radius: 13px; }.play-button { width: 62px; height: 62px; }.video-caption { right: 15px; bottom: 13px; left: 15px; }.video-caption small { display: none; }.flow { grid-template-columns: 1fr 1fr; }.flow li:last-child { grid-column: 1/-1; max-width: 220px; margin: auto; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 220px; }.showcase { margin-top: 55px; }.showcase-copy h3 { font-size: 25px; }.screenshot-placeholder.landscape { aspect-ratio: 4/3; }.mobile-showcase { margin-top: 70px; padding: 30px 20px; }.phone-row { gap: 8px; }.mobile-shot { width: 31%; border-radius: 18px; }.mobile-shot.elevated { transform: translateY(-10px); }.deliverables { grid-template-columns: 1fr; }.stack-grid { grid-template-columns: 1fr; }.architecture { padding: 25px 20px; }.architecture-flow { display: grid; grid-template-columns: 1fr 18px 1fr; }.architecture-flow > i { display: block!important; }.architecture-flow > i svg { transform: none; }.architecture-flow > div { min-width: 0; }.state-card { padding: 23px 20px; }.reason-card { grid-template-columns: 1fr; padding: 30px 24px; }.reason-mark { width: 72px; height: 72px; }.reason-card h2 { font-size: 27px; }.audience-grid { grid-template-columns: 1fr; }.audience-grid article { min-height: 230px; }.cta-card { width: calc(100% - 20px); padding: 55px 20px; }.cta-card h2 { font-size: 35px; }.contact-placeholder { align-items: flex-start; flex-direction: column; }.footer-inner { align-items: flex-start; flex-direction: column; gap: 13px; padding: 25px 0; }.footer-inner span:nth-of-type(1) { margin-left: 0; }.toast { right: 16px; bottom: 16px; max-width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.button,.play-button { transition: none; } }
@media (max-width: 640px) {
  .contact-links { width: 100%; }.contact-links a { width: 100%; padding: 6px 2px; }.contact-links a + a { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); border-left: 0; }
  .architecture-flow { display: flex; align-items: stretch; flex-direction: column; gap: 8px; }
  .architecture-flow > div { width: 100%; min-height: 88px; grid-template-columns: 28px 1fr; justify-items: start; gap: 14px; padding: 16px 18px; text-align: left; }
  .architecture-flow > div > svg { align-self: center; width: 24px; height: 24px; }
  .architecture-flow span { align-self: center; }
  .architecture-flow strong { font-size: 14px; }.architecture-flow small { font-size: 13px; }
  .architecture-flow > i { display: grid!important; height: 18px; place-items: center; }
  .architecture-flow > i svg { width: 16px; transform: rotate(90deg); }
}