:root {
  --ink: #151c23;
  --ink-2: #26303a;
  --paper: #f4f0e7;
  --paper-2: #ebe5da;
  --white: #fffdf8;
  --acid: #dcff58;
  --coral: #ff745f;
  --blue: #78a9ff;
  --violet: #a78bfa;
  --mint: #8ee3c1;
  --yellow: #ffd76b;
  --line: rgba(21, 28, 35, 0.16);
  --muted: #65707a;
  --radius: 28px;
  --shadow: 0 30px 80px rgba(29, 38, 47, 0.15);
  --page: min(1240px, calc(100vw - 56px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 12px; transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header {
  position: relative;
  z-index: 30;
  width: var(--page);
  height: 86px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-size: 22px; font-weight: 780; letter-spacing: -.04em; }
.brand-mark { position: relative; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 11px; background: var(--ink); overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.site-nav { display: flex; gap: 30px; align-items: center; }
.site-nav a, .text-link { font-size: 14px; font-weight: 650; transition: opacity .2s; }
.site-nav a:hover, .text-link:hover { opacity: .58; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 19px; }
.language-button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; font-weight: 720; }
.language-button:hover { background: var(--white); }
.language-button .svg-glyph { width: 17px; height: 17px; margin: 0; }
.menu-button { display: none; }

.button { min-height: 48px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid transparent; font-size: 14px; font-weight: 760; transition: transform .2s, box-shadow .2s, background .2s; }
.button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 40px; padding-inline: 18px; font-size: 13px; }
.button-dark { color: white; background: var(--ink); box-shadow: 0 8px 20px rgba(21,28,35,.18); }
.button-dark:hover { box-shadow: 0 12px 30px rgba(21,28,35,.28); }
.button-acid { color: var(--ink); background: var(--acid); border-color: rgba(21,28,35,.14); box-shadow: 0 12px 30px rgba(136,159,48,.18); }
.button-acid:hover { box-shadow: 0 16px 38px rgba(136,159,48,.28); }
.button-quiet { background: rgba(255,255,255,.6); border-color: var(--line); }
.button-quiet:hover { background: white; }
.button-outline { border-color: rgba(21,28,35,.25); }
.button-light { color: var(--ink); background: var(--white); }
.play { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; color: white; background: var(--ink); border-radius: 50%; font-size: 8px; padding-left: 2px; }

.hero { position: relative; overflow: hidden; padding: 84px 0 42px; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 260px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.3)); pointer-events: none; }
.hero-halo { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .7; pointer-events: none; }
.hero-halo-one { width: 420px; height: 420px; right: -130px; top: 30px; background: radial-gradient(circle, rgba(220,255,88,.5), transparent 68%); }
.hero-halo-two { width: 360px; height: 360px; left: -180px; top: 300px; background: radial-gradient(circle, rgba(120,169,255,.25), transparent 70%); }
.hero-copy { position: relative; z-index: 2; width: min(860px, calc(100% - 48px)); margin: 0 auto 66px; text-align: center; }
.eyebrow { margin: 0 0 24px; display: inline-flex; align-items: center; gap: 10px; color: #4d5863; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,116,95,.12); }
.hero h1 { margin: 0; display: flex; flex-direction: column; font-size: clamp(64px, 8.2vw, 118px); line-height: .84; letter-spacing: -.075em; font-weight: 760; }
.hero h1 em { color: var(--coral); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.07em; }
.hero-lead { max-width: 670px; margin: 32px auto 0; color: #4d5964; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; }
.hero-actions { margin-top: 30px; display: flex; gap: 10px; justify-content: center; }
.hero-note { margin: 14px 0 0; color: #7b827f; font-size: 12px; }

.product-stage { position: relative; z-index: 3; width: var(--page); aspect-ratio: 1.78; min-height: 560px; margin: 0 auto; border: 1px solid rgba(21,28,35,.24); border-radius: 28px; background: #fff; box-shadow: 0 40px 100px rgba(38,48,58,.2), 0 2px 0 rgba(255,255,255,.9) inset; overflow: visible; }
.stage-topbar { height: 62px; padding: 0 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #e6e8e9; background: #f8f8f6; border-radius: 27px 27px 0 0; }
.stage-dots { display: flex; gap: 7px; }
.stage-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d2d6d7; }
.stage-dots i:first-child { background: #fa8b7e; }
.stage-search { width: 315px; height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 8px; color: #6f7980; background: #fff; border: 1px solid #e1e4e5; border-radius: 9px; font-size: 11px; }
.stage-search svg { width: 15px; fill: none; stroke: #8a9298; stroke-width: 1.5; }
.stage-search span { flex: 1; }
kbd { border: 1px solid #d7dbdc; border-radius: 5px; background: #f5f6f5; padding: 2px 5px; color: #9ba1a5; font: 9px inherit; box-shadow: 0 1px 0 #ddd; }
.stage-avatars { justify-self: end; display: flex; }
.stage-avatars i { width: 28px; height: 28px; margin-left: -7px; display: grid; place-items: center; border: 2px solid #f8f8f6; border-radius: 50%; color: #fff; background: #ff8c75; font-style: normal; font-size: 8px; font-weight: 750; }
.stage-avatars i:nth-child(2) { background: #5d83d3; }
.stage-avatars i:nth-child(3) { background: #27313b; }
.stage-body { height: calc(100% - 62px); min-height: 498px; display: grid; grid-template-columns: 176px minmax(0, 1fr) 244px; overflow: hidden; border-radius: 0 0 27px 27px; }
.stage-sidebar { position: relative; padding: 26px 18px; background: #182129; color: #dbe1e3; }
.mini-brand { height: 34px; margin-bottom: 28px; display: flex; align-items: center; }
.mini-brand span { width: 28px; height: 28px; border-radius: 9px; background: var(--acid); clip-path: polygon(0 0, 62% 0, 100% 38%, 100% 100%, 38% 100%, 0 62%); }
.stage-sidebar button { width: 100%; height: 38px; margin-bottom: 6px; padding: 0 10px; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 9px; color: #909ba3; background: transparent; text-align: left; font-size: 10px; }
.stage-sidebar button b { flex: 1; font-weight: 600; }
.stage-sidebar button small { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 6px; color: #172029; background: var(--acid); font-size: 8px; }
.stage-sidebar .stage-nav-active { color: white; background: rgba(255,255,255,.09); }
.stage-sidebar button i { width: 14px; height: 14px; border: 1.5px solid currentColor; opacity: .8; }
.nav-grid { border-radius: 3px; background: linear-gradient(90deg, transparent 43%, currentColor 44% 56%, transparent 57%), linear-gradient(0deg, transparent 43%, currentColor 44% 56%, transparent 57%); }
.nav-dot { border-radius: 50%; }
.nav-line { border-radius: 50% 50% 2px 2px; }
.nav-box { border-radius: 3px; }
.nav-doc { border-radius: 2px; border-top-right-radius: 6px !important; }
.nav-team { border-radius: 7px 7px 2px 2px; }
.stage-rule { height: 1px; margin: 15px 5px; background: rgba(255,255,255,.08); }
.sidebar-profile { position: absolute; left: 20px; right: 20px; bottom: 21px; display: flex; align-items: center; gap: 9px; color: #aeb7bd; font-size: 9px; }
.sidebar-profile span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: white; background: #bc6f64; font-size: 8px; }
.stage-main { padding: 38px 34px 32px; background: #f3f3f0; min-width: 0; }
.stage-heading { display: flex; align-items: center; justify-content: space-between; }
.stage-heading small { color: #8c9495; font-size: 8px; letter-spacing: .12em; }
.stage-heading h2 { margin: 5px 0 0; font-size: clamp(18px, 2vw, 27px); letter-spacing: -.04em; }
.stage-heading button { width: 33px; height: 33px; border: 0; border-radius: 50%; color: var(--ink); background: var(--acid); font-size: 21px; }
.focus-card { margin-top: 26px; min-height: 135px; padding: 26px; display: flex; align-items: center; justify-content: space-between; border-radius: 19px; color: white; background: linear-gradient(125deg, #222e37, #34434d); box-shadow: 0 18px 30px rgba(31,42,51,.16); overflow: hidden; }
.focus-copy span { color: var(--acid); font-size: 8px; letter-spacing: .14em; }
.focus-copy h3 { margin: 7px 0 4px; font-size: clamp(16px, 1.7vw, 23px); letter-spacing: -.03em; }
.focus-copy p { margin: 0; color: #aeb9be; font-size: 9px; }
.focus-progress { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--acid) 72%, rgba(255,255,255,.12) 0); }
.focus-progress::before { content: ""; position: absolute; width: 57px; height: 57px; border-radius: 50%; background: #303e47; }
.focus-progress span { position: relative; font-size: 12px; font-weight: 750; }
.stage-grid { margin-top: 18px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.mini-panel { min-height: 180px; padding: 18px; border: 1px solid #e0e2df; border-radius: 16px; background: white; }
.mini-panel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; font-size: 10px; }
.mini-panel header span { color: #8f969a; }
.agenda-row { padding: 8px 0; display: grid; grid-template-columns: 31px 5px 1fr; gap: 7px; align-items: center; border-top: 1px solid #eff0ee; }
.agenda-row time { color: #8a9296; font-size: 8px; }
.agenda-row > i { width: 4px; height: 26px; border-radius: 3px; }
.agenda-row .blue { background: var(--blue); }.agenda-row .orange { background: var(--coral); }.agenda-row .green { background: var(--mint); }
.agenda-row p { margin: 0; display: flex; flex-direction: column; font-size: 8px; }
.agenda-row p b { font-size: 9px; }.agenda-row p small { color: #969da1; }
.pulse-chart { height: 92px; display: flex; align-items: flex-end; gap: 6px; }
.pulse-chart i { flex: 1; height: 35%; border-radius: 4px 4px 1px 1px; background: #d9e4d3; }
.pulse-chart i:nth-child(2) { height: 48%; }.pulse-chart i:nth-child(3) { height: 42%; }.pulse-chart i:nth-child(4) { height: 68%; }.pulse-chart i:nth-child(5) { height: 58%; }.pulse-chart i:nth-child(6) { height: 79%; }.pulse-chart i:nth-child(7) { height: 92%; background: var(--acid); }
.pulse-labels { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; color: #8b9397; font-size: 8px; }
.pulse-labels strong { color: #2b4b3f; }
.stage-rail { padding: 28px 20px; border-left: 1px solid #e7e8e5; background: #fafaf8; }
.rail-head { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.rail-head button { border: 0; color: #9ba1a3; background: transparent; }
.activity-item { margin-bottom: 21px; display: flex; gap: 10px; }
.avatar { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: white; font-size: 7px; font-weight: 750; }
.avatar.coral { background: #df7969; }.avatar.violet { background: #8f7acb; }.avatar.blue { background: #5c8ac7; }
.activity-item p { margin: 0; color: #6f797e; font-size: 8px; line-height: 1.45; }
.activity-item p b { color: var(--ink); }.activity-item p small { margin-top: 3px; display: block; color: #a3a8aa; }
.rail-note { margin-top: 34px; padding: 17px; border: 1px solid #dfe2de; border-radius: 15px; background: white; }
.rail-note-icon { width: 27px; height: 27px; margin-bottom: 13px; display: grid; place-items: center; border-radius: 8px; color: #24352f; background: #dff4e7; font-size: 13px; }
.rail-note b { display: block; font-size: 9px; }.rail-note p { margin: 5px 0 13px; color: #81898d; font-size: 8px; }
.rail-note button { padding: 0; border: 0; color: #254e42; background: transparent; font-size: 8px; font-weight: 750; }
.floating-chip { position: absolute; padding: 10px 14px 10px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(21,28,35,.18); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 14px 30px rgba(37,46,55,.16); backdrop-filter: blur(10px); }
.floating-chip > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; font-size: 13px; }
.floating-chip p { margin: 0; display: flex; flex-direction: column; font-size: 9px; }.floating-chip p small { color: #81898e; }
.chip-mail { left: -31px; top: 120px; animation: float 5s ease-in-out infinite; }.chip-mail > span { background: #ffe5d7; color: #b65d3b; }
.chip-flow { right: -28px; bottom: 70px; animation: float 5.8s .7s ease-in-out infinite; }.chip-flow > span { background: #e5f4be; color: #446727; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
.hero-foot { position: relative; z-index: 3; width: var(--page); margin: 33px auto 0; display: flex; align-items: center; justify-content: center; gap: 40px; }
.hero-foot p { margin: 0; display: flex; align-items: baseline; gap: 7px; color: #67717a; font-size: 12px; }
.hero-foot strong { color: var(--ink); font-size: 16px; }.hero-foot > i { width: 3px; height: 3px; border-radius: 50%; background: #929a9f; }

.section { width: var(--page); margin-inline: auto; padding: 128px 0; }
.section-intro { margin: 0 auto 64px; text-align: center; }
.section-intro-left { margin-left: 0; text-align: left; }
.kicker { margin: 0 0 18px; color: #707a81; letter-spacing: .14em; font-size: 11px; font-weight: 780; }
.kicker.light { color: #aeb9bd; }
.section-intro h2, .apps-heading h2, .teams-copy h2, .desktop-copy h2, .closing-card h2 { margin: 0; font-size: clamp(42px, 5.5vw, 72px); line-height: .98; letter-spacing: -.06em; }
.section-intro > p:last-child, .apps-heading > p, .teams-copy > p, .desktop-copy > p, .closing-card > p { color: #606c75; font-size: 17px; line-height: 1.65; }
.section-intro > p:last-child { margin: 24px auto 0; }
.section-intro-left > p:last-child { margin-left: 0; }
.narrative { border-bottom: 1px solid var(--line); }
.journey { display: grid; grid-template-columns: 1fr 74px 1fr 74px 1fr; align-items: center; }
.journey-step { position: relative; min-height: 382px; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.42); }
.step-one { transform: rotate(-1deg); }.step-two { transform: translateY(22px) rotate(1deg); }.step-three { transform: rotate(-.6deg); }
.step-number { position: absolute; inset-inline-end: 24px; top: 22px; color: #8d959a; font-size: 11px; letter-spacing: .1em; }
.journey-icon { width: 70px; height: 70px; margin-bottom: 52px; display: grid; place-items: center; border-radius: 21px; font-size: 30px; }
.step-one .journey-icon { background: #ffe0d8; color: #a74334; }.step-two .journey-icon { background: #dce8ff; color: #325ca8; }.step-three .journey-icon { background: #e5f5bc; color: #4a691f; }
.journey-step h3 { margin: 0; font-size: 24px; letter-spacing: -.04em; }
.journey-step p { margin: 12px 0 28px; color: #657078; font-size: 14px; line-height: 1.65; }
.journey-apps { display: flex; flex-wrap: wrap; gap: 7px; }
.journey-apps span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 10px; font-weight: 700; }
.journey-arrow svg { width: 100%; fill: none; stroke: #99a1a4; stroke-width: 1.1; stroke-dasharray: 3 4; }

.apps-section { padding-bottom: 120px; }
.apps-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: end; }
.apps-heading > p { margin: 0 0 3px; max-width: 480px; }
.apps-slider-toolbar { margin: 45px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.filter-bar { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.filter-bar button { height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; color: #59646c; background: transparent; cursor: pointer; font-size: 12px; font-weight: 680; transition: .2s; }
.filter-bar button:hover, .filter-bar .filter-active { color: white; background: var(--ink); border-color: var(--ink); }
.apps-slider-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.app-slider-control { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.45); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }.app-slider-control:hover { border-color: #9ca6aa; background: #fff; transform: translateY(-1px); }.app-slider-control .svg-glyph { width: 18px; height: 18px; }
.apps-more-button { min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }.apps-more-button .svg-glyph { width: 16px; height: 16px; }
.app-slider-viewport { width: 100%; padding-bottom: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-behavior: smooth; scrollbar-width: none; }.app-slider-viewport::-webkit-scrollbar { display: none; }
.app-grid { width: max-content; display: flex; gap: 12px; }
.app-card { flex: 0 0 clamp(250px, 22vw, 305px); min-height: 228px; padding: 24px; display: flex; flex-direction: column; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.48); transition: transform .25s, background .25s, box-shadow .25s; animation: cardIn .35s both; }
.app-card:hover { transform: translateY(-5px); background: var(--white); box-shadow: 0 18px 42px rgba(32,42,51,.1); }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.app-icon { width: 47px; height: 47px; margin-bottom: 38px; display: grid; place-items: center; border-radius: 14px; color: var(--icon-ink, var(--ink)); background: var(--icon-bg, #e9ecee); }
.app-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-icon img { width: 34px; height: 34px; display: block; object-fit: contain; }
.app-card h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.025em; }
.app-card p { margin: 0; color: #6e777e; font-size: 12px; line-height: 1.55; }
.app-card footer { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; }
.app-card footer span { color: #899196; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.app-card footer i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #8a9297; background: rgba(21,28,35,.05); font-style: normal; font-size: 13px; }

.platform { border-top: 1px solid var(--line); }
.feature-mosaic { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; }
.feature-block { position: relative; min-height: 430px; padding: 36px; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; background: #fff; }
.feature-index { display: inline-block; margin-bottom: 18px; color: #8a9296; font-size: 10px; letter-spacing: .1em; }
.feature-block h3 { max-width: 440px; margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -.045em; }
.feature-block p { max-width: 460px; margin: 12px 0 0; color: #6d767d; font-size: 13px; line-height: 1.65; }
.search-block { background: #e2e9fe; }
.search-demo { position: absolute; left: 36px; right: 36px; bottom: 0; padding: 18px; border: 1px solid rgba(21,28,35,.14); border-bottom: 0; border-radius: 18px 18px 0 0; background: rgba(255,255,255,.86); box-shadow: 0 -15px 35px rgba(56,76,117,.12); }
.search-demo-input { height: 43px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #dfe3e8; border-radius: 10px; background: white; font-size: 11px; }
.search-demo-input b { flex: 1; }
.search-demo-row { padding: 9px 7px; display: flex; gap: 9px; align-items: center; border-bottom: 1px solid #e8e9e8; }
.search-demo-row:last-child { border: 0; }.demo-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; font-size: 9px; font-weight: 800; }.demo-icon.orange { background:#ffe4d6 }.demo-icon.green { background:#dff3d6 }.demo-icon.blue { background:#dae7ff }
.search-demo-row p { flex: 1; margin: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 9px; }.search-demo-row small { color: #999fa1; }.search-demo-row i { color: #969da1; font-style: normal; }
.reference-block { background: #f7e1dc; }
.reference-map { position: absolute; inset: 185px 0 0; }
.map-node { position: absolute; width: 55px; height: 55px; display: grid; place-items: center; border: 1px solid rgba(21,28,35,.16); border-radius: 16px; background: #fffaf4; box-shadow: 0 12px 24px rgba(95,52,43,.09); font-size: 8px; font-weight: 800; }
.node-center { left: 50%; top: 48%; width: 74px; height: 74px; transform: translate(-50%,-50%); border-radius: 23px; color: #fff; background: var(--coral); font-size: 16px; }
.node-one { left: 12%; top: 20%; }.node-two { right: 11%; top: 13%; }.node-three { right: 19%; bottom: 10%; }
.map-line { position: absolute; left: 45%; top: 47%; width: 40%; height: 1px; background: #d59e91; transform-origin: left; }.line-a { transform: rotate(-155deg); }.line-b { transform: rotate(-35deg); }.line-c { transform: rotate(28deg); }
.collab-block { min-height: 470px; background: #dfeede; }
.collab-demo { position: absolute; right: 35px; bottom: 0; width: 46%; height: 315px; padding: 26px 28px; border-radius: 17px 17px 0 0; background: #fff; box-shadow: 0 -14px 40px rgba(48,85,58,.12); transform: rotate(1.5deg); }
.collab-toolbar { margin: -12px -12px 30px; display: flex; gap: 5px; align-items: center; }.collab-toolbar > span { width: 13px; height: 5px; border-radius: 5px; background: #e1e4e1; }.collab-toolbar i { width: 22px; height: 22px; margin-left: auto; display: grid; place-items: center; border-radius: 50%; color: white; background: #e67e69; font-style: normal; font-size: 6px; }.collab-toolbar i + i { margin-left: -9px; background: #6689cc; }
.collab-demo h4 { position: relative; margin: 0 0 18px; font: 27px/1.1 Georgia, serif; }.collab-demo p { color: #5f6967; font-family: Georgia, serif; font-size: 14px; }.collab-demo mark { background: #e7ff9d; }.cursor { position: absolute; right: 9px; top: -3px; width: 2px; height: 31px; background: #6c8fd4; }.comment-pill { position: absolute; right: -22px; bottom: 45px; padding: 8px 12px 8px 7px; display: flex; align-items: center; gap: 7px; border-radius: 12px; background: #202a31; color: white; font-size: 8px; box-shadow: 0 12px 24px rgba(22,35,29,.2); }.comment-pill b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 24%; background: #6c8fd4; font-size: 6px; }
.portability-block { min-height: 470px; background: #fff2c9; }.file-formats { position: absolute; left: 36px; right: 36px; bottom: 40px; display: flex; flex-wrap: wrap; gap: 9px; }.file-formats span { padding: 10px 13px; border: 1px solid rgba(21,28,35,.14); border-radius: 9px; background: rgba(255,255,255,.55); font: 700 10px ui-monospace, monospace; }.file-formats span:nth-child(even) { transform: translateY(13px) rotate(3deg); }.file-formats span:nth-child(3n) { transform: rotate(-4deg); }

.desktop-section { position: relative; width: min(1380px, calc(100vw - 28px)); min-height: 750px; margin: 0 auto; padding: 110px max(50px, calc((100% - 1240px)/2)); display: grid; grid-template-columns: .75fr 1.25fr; gap: 60px; align-items: center; border-radius: 36px; color: white; background: #151e25; overflow: hidden; }
.desktop-section::before { content: ""; position: absolute; width: 700px; height: 700px; right: -150px; top: -250px; border-radius: 50%; background: radial-gradient(circle, rgba(220,255,88,.18), transparent 65%); }
.desktop-copy { position: relative; z-index: 2; }
.desktop-copy h2 { font-size: clamp(48px, 5.5vw, 76px); }
.desktop-copy > p { color: #aeb7bc; max-width: 520px; }
.desktop-copy ul { margin: 30px 0 34px; padding: 0; list-style: none; }
.desktop-copy li { margin: 13px 0; padding-left: 28px; color: #d7dddf; font-size: 13px; }
.desktop-copy li::before { content: ""; position: absolute; margin-left: -26px; color: var(--acid); font-weight: 800; }
.desktop-copy > small { margin: 14px 0 0 6px; display: block; color: #89959b; font-size: 10px; }
.desktop-art { position: relative; min-height: 520px; }
.orbit { position: absolute; border: 1px solid rgba(220,255,88,.12); border-radius: 50%; }.orbit-one { width: 570px; height: 570px; right: -30px; top: -25px; }.orbit-two { width: 420px; height: 420px; right: 45px; top: 50px; }
.desktop-window { position: absolute; border: 1px solid rgba(255,255,255,.17); border-radius: 13px; background: #f6f6f3; box-shadow: 0 35px 70px rgba(0,0,0,.35); overflow: hidden; }
.desktop-window-back { width: 72%; height: 340px; right: -5%; top: 5%; transform: rotate(5deg); opacity: .78; }.desktop-window-front { width: 82%; height: 420px; left: 0; bottom: 0; transform: rotate(-2deg); }
.window-bar { height: 35px; padding: 0 11px; display: flex; align-items: center; gap: 8px; color: #616a6f; border-bottom: 1px solid #dadede; background: #e9eceb; font-size: 8px; }.window-bar i { width: 13px; height: 13px; border-radius: 4px; background: var(--acid); }.window-bar span { flex: 1; }.window-bar b { font-size: 7px; letter-spacing: normal; color: #7b8387; }
.window-content { height: calc(100% - 35px); display: flex; color: #20292f; }.project-window aside { width: 90px; background: #202b32; }.project-window main { flex: 1; padding: 40px 25px; display: flex; gap: 12px; }.project-window main span { flex: 1; height: 180px; border-radius: 8px; background: #e4e7e5; }.project-window main span:nth-child(2) { height: 220px; }.doc-window aside { width: 48px; padding: 18px 12px; background: #273139; }.doc-window aside i { display: block; height: 4px; margin-bottom: 10px; border-radius: 2px; background: #6f7b81; }.doc-window main { width: 64%; margin: 0 auto; padding: 45px 15px; }.doc-window main small { color: #9aa09f; font-size: 6px; letter-spacing: .15em; }.doc-window h4 { margin: 9px 0 26px; max-width: 320px; font: 30px/1.1 Georgia, serif; }.doc-window p { height: 5px; margin: 9px 0; border-radius: 3px; background: #dde0de; }.doc-window p.short { width: 75%; }.doc-highlight { width: 48%; height: 6px; margin-top: 18px; background: #e5ff8e; }
.desktop-badge { position: absolute; padding: 11px; display: flex; gap: 9px; align-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; color: #172029; background: rgba(255,255,255,.92); box-shadow: 0 20px 35px rgba(0,0,0,.25); }.desktop-badge > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #e9f9b5; }.desktop-badge p { margin: 0; display: flex; flex-direction: column; font-size: 8px; }.desktop-badge p small { color: #747d82; }.badge-sync { right: 0; bottom: 32px; }.badge-open { left: -22px; top: 82px; }.badge-open > span { background: #dbe8ff; }

.teams { padding-top: 150px; }
.teams-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }
.teams-copy > p { margin: 24px 0 38px; }
.team-app-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; }
.teams-trust { margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.teams-trust li { padding: 6px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(0, 8, 19, .1); border-radius: 999px; background: #fff; color: #3a4349; font-size: 11px; font-weight: 600; }
.teams-trust li::before { content: ""; width: 7px; height: 7px; border-radius: 2px 6px 2px 6px; background: #77a0a2; }
.team-app-list > div { display: flex; gap: 12px; align-items: center; }.team-app-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; font-size: 10px; font-weight: 800; }.team-app-icon.projects { background: #dce8ff; }.team-app-icon.people { background: #ffdfd8; }.team-app-icon.approvals { background: #e2f1c1; }.team-app-icon.flow { background: #e8ddff; }.team-app-list p { margin: 0; display: flex; flex-direction: column; font-size: 12px; }.team-app-list small { color: #788187; font-size: 10px; }
.flow-canvas { position: relative; min-height: 590px; border: 1px solid var(--line); border-radius: 27px; background-color: #eceae4; background-image: radial-gradient(rgba(21,28,35,.14) .7px, transparent .7px); background-size: 16px 16px; overflow: hidden; box-shadow: var(--shadow); }
.canvas-toolbar { height: 62px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.7); backdrop-filter: blur(10px); font-size: 12px; font-weight: 700; }.canvas-toolbar > div { display: inline-flex; align-items: stretch; }.canvas-toolbar button { height: 29px; margin: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 0; background: #fff; font-size: 9px; line-height: 1; vertical-align: top; }.canvas-toolbar button + button { margin-inline-start: -1px; }.canvas-toolbar button:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }.canvas-toolbar button:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }
.flow-lines { position: absolute; inset: 62px 0 0; width: 100%; height: calc(100% - 62px); fill: none; stroke-width: 2; }.path-main { stroke: #96b65e; }.path-branch { stroke: #9b8bc2; stroke-dasharray: 5 4; }
.flow-node { position: absolute; width: 170px; padding: 15px; display: flex; flex-direction: column; border: 1px solid rgba(21,28,35,.2); border-radius: 14px; background: #fff; box-shadow: 0 15px 30px rgba(48,57,62,.12); font-size: 10px; }.flow-node::before { content: ""; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 2px solid #fff; border-radius: 50%; background: #7e9e50; }.flow-node::after { content: ""; position: absolute; right: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 2px solid #fff; border-radius: 50%; background: #7e9e50; }.flow-node small { margin-bottom: 5px; color: #8d9497; font-size: 7px; letter-spacing: .12em; }.flow-node span { margin-top: 8px; color: #849095; font-size: 8px; }.node-trigger { left: 40px; top: 120px; border-top: 4px solid #82a9f1; }.node-check { left: 265px; top: 250px; border-top: 4px solid #f1b450; }.node-approve { right: 40px; top: 120px; border-top: 4px solid #9d87d4; }.node-task { right: 65px; bottom: 55px; border-top: 4px solid #8daf57; }.flow-cursor { position: absolute; left: 47%; top: 49%; display: flex; align-items: center; gap: 5px; color: #fff; font-size: 7px; }.flow-cursor span { width: 0; height: 0; border-top: 9px solid #7564b5; border-right: 6px solid transparent; transform: rotate(-20deg); }.flow-cursor b { padding: 3px 6px; border-radius: 5px; background: #7564b5; }

.closing { padding-top: 80px; }
.closing-card { position: relative; padding: 110px 32px; border: 1px solid var(--line); border-radius: 32px; text-align: center; background: var(--acid); overflow: hidden; }
.closing-card::before, .closing-card::after { content: ""; position: absolute; border: 1px solid rgba(21,28,35,.14); border-radius: 50%; }.closing-card::before { width: 400px; height: 400px; left: -180px; top: -200px; }.closing-card::after { width: 520px; height: 520px; right: -250px; bottom: -310px; }
.closing-card h2 { font-size: clamp(55px, 7vw, 92px); }.closing-card > p { max-width: 650px; margin: 22px auto 0; color: #48522e; }.closing-actions { margin-top: 32px; display: flex; gap: 10px; justify-content: center; }.closing-stars i { position: absolute; font-style: normal; color: rgba(21,28,35,.22); }.closing-stars i:first-child { left: 10%; top: 22%; font-size: 30px; }.closing-stars i:nth-child(2) { right: 12%; top: 18%; font-size: 18px; }.closing-stars i:nth-child(3) { right: 20%; bottom: 18%; font-size: 25px; }


.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

[dir="rtl"] .site-header, [dir="rtl"] .apps-heading, [dir="rtl"] .teams-layout, [dir="rtl"] .desktop-section { direction: rtl; }
[dir="rtl"] .site-nav, [dir="rtl"] .header-actions { direction: rtl; }
[dir="rtl"] .hero h1 { letter-spacing: -.045em; }
[dir="rtl"] .section-intro-left, [dir="rtl"] .apps-heading, [dir="rtl"] .teams-copy, [dir="rtl"] .desktop-copy, [dir="rtl"] .site-footer { text-align: right; }
[dir="rtl"] .desktop-copy li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .desktop-copy li::before { margin-left: 0; margin-right: -26px; }

@media (max-width: 1100px) {
  :root { --page: min(100% - 40px, 1000px); }
  .site-nav { gap: 18px; }
  .stage-body { grid-template-columns: 150px minmax(0,1fr); }.stage-rail { display: none; }
  .app-grid { grid-template-columns: repeat(3,1fr); }
  .desktop-section { grid-template-columns: .8fr 1.2fr; padding-inline: 55px; }
  .desktop-window-front { width: 95%; }.teams-layout { gap: 50px; }
  .flow-node { width: 150px; }.node-check { left: 34%; }.node-approve { right: 25px; }.node-task { right: 35px; }
}

@media (max-width: 820px) {
  :root { --page: calc(100% - 30px); }
  .site-header { height: 72px; grid-template-columns: 1fr auto auto; gap: 8px; }
  .menu-button { grid-column: 3; grid-row: 1; }
  .header-actions { display: flex; grid-column: 2; grid-row: 1; gap: 0; }
  .header-actions .text-link, .header-actions .button { display: none; }
  .hero { padding-top: 65px; }.hero h1 { font-size: clamp(55px, 14vw, 88px); }.hero-copy { margin-bottom: 48px; }
  .product-stage { min-height: 530px; aspect-ratio: auto; }.stage-body { min-height: 468px; grid-template-columns: 115px minmax(0,1fr); }.stage-sidebar { padding: 18px 10px; }.stage-sidebar button b, .stage-sidebar button small, .sidebar-profile b { display: none; }.stage-sidebar button { width: 38px; margin-inline: auto; justify-content: center; padding: 0; }.mini-brand { justify-content: center; }.sidebar-profile { justify-content: center; }.stage-main { padding: 28px 22px; }.chip-mail { left: 10px; top: 90px; }.chip-flow { right: 10px; bottom: 20px; }
  .journey { grid-template-columns: 1fr; gap: 14px; }.journey-step { min-height: 0; transform: none; }.journey-icon { margin-bottom: 30px; }.journey-arrow { display: none; }
  .apps-heading { grid-template-columns: 1fr; gap: 22px; }.apps-slider-toolbar { align-items: flex-end; }.filter-bar { max-width: 65%; }
  .feature-mosaic { grid-template-columns: 1fr; }.feature-block { min-height: 430px; }.collab-demo { width: 50%; }
  .desktop-section { min-height: 1050px; padding: 85px 35px; grid-template-columns: 1fr; align-items: start; }.desktop-art { min-height: 500px; }.desktop-window-front { width: 88%; }
  .teams-layout { grid-template-columns: 1fr; }.flow-canvas { min-height: 560px; }

}

@media (max-width: 560px) {
  :root { --page: calc(100% - 22px); --radius: 22px; }
  .hero { padding-top: 48px; }.hero-copy { width: calc(100% - 22px); }.hero h1 { font-size: 53px; line-height: .9; }.hero-lead { margin-top: 24px; font-size: 16px; }.hero-actions { flex-direction: column; align-items: stretch; }.hero-note { font-size: 10px; }
  .product-stage { border-radius: 20px; min-height: 565px; }.stage-topbar { height: 50px; grid-template-columns: auto 1fr; border-radius: 19px 19px 0 0; }.stage-search { justify-self: end; width: min(230px, calc(100vw - 110px)); }.stage-avatars { display: none; }.stage-body { min-height: 515px; height: calc(100% - 50px); grid-template-columns: 54px minmax(0,1fr); border-radius: 0 0 19px 19px; }.stage-sidebar { padding-inline: 7px; }.mini-brand span { width: 25px; height: 25px; }.stage-sidebar button { width: 34px; }.sidebar-profile { left: 0; right: 0; }.stage-main { padding: 22px 13px; }.stage-heading h2 { font-size: 17px; }.focus-card { min-height: 120px; padding: 18px; }.focus-progress { width: 58px; height: 58px; }.focus-progress::before { width: 45px; height: 45px; }.stage-grid { grid-template-columns: 1fr; }.pulse-panel { display: none; }.floating-chip { display: none; }.hero-foot { gap: 14px; justify-content: space-between; }.hero-foot p { display: block; text-align: center; font-size: 9px; }.hero-foot strong { display: block; font-size: 13px; }
  .section { padding: 90px 0; }.section-intro h2, .apps-heading h2, .teams-copy h2, .desktop-copy h2 { font-size: 42px; }.section-intro > p:last-child, .apps-heading > p, .teams-copy > p, .desktop-copy > p { font-size: 15px; }
  .journey-step { padding: 26px; }.journey-step h3 { font-size: 22px; }
  .apps-slider-toolbar { align-items: stretch; flex-direction: column; }.filter-bar { max-width: none; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }.filter-bar button { flex: 0 0 auto; }.apps-slider-actions { justify-content: flex-end; }.apps-more-button { margin-inline-start: auto; }.app-card { flex-basis: calc(100vw - 44px); min-height: 210px; }.app-icon { margin-bottom: 25px; }
  .feature-block { min-height: 430px; padding: 28px; }.feature-block h3 { font-size: 25px; }.search-demo { left: 20px; right: 20px; }.collab-block { min-height: 600px; }.collab-demo { width: 88%; right: 6%; height: 300px; }.portability-block { min-height: 380px; }.file-formats { left: 28px; right: 28px; bottom: 30px; }
  .desktop-section { width: calc(100% - 12px); min-height: 1000px; padding: 75px 22px; border-radius: 26px; }.desktop-art { min-height: 430px; }.desktop-window-front { width: 96%; height: 350px; }.desktop-window-back { width: 84%; height: 300px; }.doc-window main { width: 75%; padding-top: 35px; }.doc-window h4 { font-size: 23px; }.badge-open { left: 0; top: 30px; }.badge-sync { right: 0; bottom: 5px; }
  .team-app-list { grid-template-columns: 1fr; }.flow-canvas { min-height: 660px; }.node-trigger { left: 25px; top: 105px; }.node-check { left: auto; right: 25px; top: 245px; }.node-approve { left: 25px; right: auto; top: 390px; }.node-task { right: 25px; bottom: 35px; }.flow-lines { opacity: .45; }
  .closing-card { padding: 85px 24px; }.closing-card h2 { font-size: 50px; }.closing-actions { flex-direction: column; }
}

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