@font-face { font-family: Prata; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/landing-orb-v11/Prata-Regular.ttf') format('truetype'); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/landing-orb-v11/manrope-cyr.woff2') format('woff2'); unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/landing-orb-v11/manrope-lat.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
#orb-story { color-scheme: light; --paper: #FCFBF8; --ink: #242322; --secondary: #666460; --edge: #DEDCD7; }
#orb-story, #orb-story * { box-sizing: border-box; }
#orb-story { margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope,Arial,sans-serif; -webkit-font-smoothing: antialiased; }
#orb-story a { color: inherit; text-decoration: none; }
#orb-story button { font: inherit; cursor: pointer; }
#orb-story button, #orb-story a { -webkit-tap-highlight-color: transparent; }
#orb-story a:focus-visible, #orb-story button:focus-visible { outline: 2px solid #784C3E; outline-offset: 5px; }
#orb-story [hidden] { display: none !important; }
#orb-story .skip { position: fixed; left: 20px; top: -100px; z-index: 10; background: var(--ink); color: var(--paper); padding: 14px 20px; border-radius: 8px; }
#orb-story .skip:focus { top: 16px; }
#orb-story { --hero-height: max(100svh,730px); --diameter: min(98svh,86vw,1100px); position: relative; isolation: isolate; overflow: clip; background: var(--paper); }
#orb-story .hero { position: relative; height: var(--hero-height); }
#orb-story .header { height: 88px; max-width: 1536px; padding: 0 54px; margin: 0 auto; display: flex; align-items: center; gap: 54px; position: relative; z-index: 4; }
#orb-story .brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font-size: 17px; font-weight: 750; letter-spacing: -.04em; }
#orb-story .brand img { object-fit: contain; }
#orb-story .nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 500; }
#orb-story .nav a, #orb-story .login { transition: color 160ms ease; }
#orb-story .nav a:hover, #orb-story .login:hover { color: #875C4B; }
#orb-story .account { margin-left: auto; display: flex; align-items: center; gap: 27px; font-size: 13px; font-weight: 500; }
#orb-story .mobile-signup, #orb-story .menu-toggle { display: none; }
#orb-story .signup { padding: 12px 19px; border: 1px solid var(--edge); border-radius: 999px; transition: border-color 160ms ease; white-space: nowrap; }
#orb-story .signup:hover { border-color: var(--secondary); }
#orb-story .intro { position: relative; z-index: 2; text-align: center; padding: clamp(40px,5.65svh,68px) 24px 0; pointer-events: none; }
#orb-story h1 { margin: 0; font-family: Prata,Georgia,serif; font-size: clamp(62px,6.6vw,104px); line-height: 1.13; font-weight: 400; letter-spacing: -.047em; }
#orb-story h1 span { display: block; white-space: nowrap; }
#orb-story .description { margin: 25px auto 0; max-width: 660px; font-size: 16px; line-height: 1.7; font-weight: 400; letter-spacing: -.01em; color: var(--secondary); }
#orb-story .orb-origin { position: absolute; width: var(--diameter); height: var(--diameter); left: 50%; top: 100%; transform: translate(-50%,-50%); visibility: hidden; pointer-events: none; }
#orb-story .orb { position: absolute; z-index: 1; left: 50%; top: var(--hero-height); transform: translate(-50%,-50%); width: var(--diameter); height: var(--diameter); touch-action: pan-y; }
#orb-story[data-motion="scroll"] .orb { left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
#orb-story .orb-surface { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; transform-origin: center; }
#orb-story .orb-poster { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
#orb-story #paint-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
#orb-story .orb[data-ready="true"] #paint-canvas { opacity: 1; }
#orb-story .orb[data-ready="true"] .orb-poster { visibility: hidden; }
#orb-story .hero-footer { position: absolute; z-index: 3; left: 54px; right: 54px; bottom: 46px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
#orb-story .hero-footer > * { pointer-events: auto; }
#orb-story .demo-link { margin-left: auto; display: inline-flex; align-items: center; gap: 18px; min-height: 48px; padding: 4px 5px 4px 19px; background: rgba(252,251,248,.96); border: 1px solid #DEDCD7; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; transition: border-color 180ms ease; }
#orb-story .demo-link:hover { border-color: var(--secondary); }
#orb-story .demo-arrow { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #E3E1DD; transition: transform 180ms ease; }
#orb-story .demo-link:hover .demo-arrow { transform: translateY(2px); }
#orb-story .paint-toggle { position: fixed; z-index: 5; left: 54px; bottom: 46px; width: 34px; height: 34px; border: 1px solid var(--edge); border-radius: 50%; background: rgba(252,251,248,.94); color: var(--secondary); display: flex; align-items: center; justify-content: center; padding: 0; }
#orb-story .paint-toggle .play-icon { display: none; }
#orb-story .paint-toggle[aria-pressed="true"] .pause-icon { display: none; }
#orb-story .paint-toggle[aria-pressed="true"] .play-icon { display: block; }
#orb-story .technology { position: relative; min-height: max(100svh,800px); max-width: 1500px; margin: 0 auto; padding: 100px 54px; display: grid; grid-template-columns: 44% 44%; column-gap: 12%; align-items: center; scroll-margin-top: 0; }
#orb-story .technology:focus { outline: none; }
#orb-story .technology-visual { display: flex; justify-content: center; }
#orb-story .orb-destination { width: min(100%,64svh,620px); aspect-ratio: 1; }
#orb-story .technology-copy { position: relative; z-index: 2; max-width: 550px; mix-blend-mode: multiply; }
#orb-story .technology h2 { font-family: Prata,Georgia,serif; font-size: clamp(40px,4.15vw,60px); font-weight: 400; letter-spacing: -.045em; line-height: 1.22; margin: 0; text-wrap: balance; }
#orb-story .technology h2 span { display: block; }
#orb-story .technology-description { font-size: 16px; color: var(--secondary); margin: 28px 0 0; max-width: 380px; line-height: 1.75; }
#orb-story .demo-player { margin-top: 32px; }
#orb-story[data-motion="static"] .technology { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: calc(var(--diameter) / 2 + 70px); text-align: center; }
#orb-story[data-motion="static"] .technology-visual { display: none; }
#orb-story[data-motion="static"] .technology-description { margin-left: auto; margin-right: auto; }
#orb-story .listen { display: inline-flex; align-items: center; gap: 12px; justify-content: center; padding: 0 24px; height: 52px; background: var(--ink); color: var(--paper); border: none; border-radius: 999px; font-size: 14px; font-weight: 600; }
#orb-story .listen .pause-icon { display: none; }
#orb-story .listen[aria-pressed="true"] .play-icon { display: none; }
#orb-story .listen[aria-pressed="true"] .pause-icon { display: block; }
#orb-story #audio-state { font-size: 12px; color: var(--secondary); margin: 14px 0 0; min-height: 18px; }
#orb-story .speech-notes { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: multiply; }
#orb-story .speech-note { position: absolute; width: 380px; height: 90px; opacity: 0; transform: rotate(-3deg); }
#orb-story .speech-note canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
#orb-story .note-manager { top: 40px; left: 7%; width: 380px; }
#orb-story .note-assistant { top: 57px; right: 10%; width: 260px; transform: rotate(3deg); }
#orb-story .note-line { bottom: 30px; left: 9%; width: 385px; transform: rotate(2deg); }
#orb-story .note-crm { bottom: 39px; right: 11%; width: 260px; transform: rotate(-4deg); }
#orb-story .note-fallback { display: none; font-family: Prata,Georgia,serif; color: #714857; font-size: 25px; line-height: 1.4; }
#orb-story .speech-note[data-fallback="true"] canvas { display: none; }
#orb-story .speech-note[data-fallback="true"] .note-fallback { display: block; }
@media (max-width: 1100px) {#orb-story .header { padding: 0 32px; gap: 38px; }
#orb-story .nav { gap: 25px; }
#orb-story .account { gap: 20px; }
#orb-story .hero-footer { left: 32px; right: 32px; bottom: 34px; }
#orb-story .paint-toggle { left: 32px; bottom: 34px; }
#orb-story .technology { padding-left: 32px; padding-right: 32px; }}
@media (max-width: 900px) {#orb-story .nav { display: none; }
#orb-story .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; padding: 0; border: none; background: transparent; color: var(--ink); }
#orb-story .nav[data-open="true"] { position: absolute; left: 23px; right: 23px; top: 75px; padding: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--edge); border-radius: 14px; background: var(--paper); }
#orb-story .nav[data-open="true"] a { display: block; padding: 12px; }
#orb-story .mobile-signup { display: block; }
#orb-story h1 { font-size: clamp(43px,7.1vw,65px); }
#orb-story .technology { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 96px 40px 144px; gap: 80px; }
#orb-story .orb-destination { width: min(78vw,400px); }
#orb-story .technology-copy { text-align: center; max-width: 590px; }
#orb-story .technology h2 { font-size: clamp(34px,5.4vw,48px); }
#orb-story .technology-description { margin: 24px auto 0; }
#orb-story .demo-player { margin-top: 26px; }
#orb-story .note-manager { top: 15px; left: 8%; width: min(75vw,310px); height: 66px; }
#orb-story .note-assistant { top: calc(96px + min(78vw,400px) + 7px); left: 8%; right: auto; width: 180px; height: 55px; }
#orb-story .note-line { top: calc(96px + min(78vw,400px) + 8px); right: 8%; left: auto; bottom: auto; width: 250px; height: 55px; }
#orb-story .note-crm { bottom: 30px; right: 10%; width: 225px; height: 70px; }}
@media (max-width: 600px) {#orb-story { --hero-height: max(100svh,690px); --diameter: min(178vw,94svh); }
#orb-story .header { height: 76px; padding: 0 23px; gap: 12px; }
#orb-story .brand { gap: 8px; font-size: 15px; }
#orb-story .brand img { width: 25px; height: 25px; }
#orb-story .account { gap: 5px; }
#orb-story .signup { display: none; }
#orb-story .login { padding: 12px 9px; font-size: 12px; }
#orb-story .intro { padding: clamp(60px,9svh,90px) 22px 0; }
#orb-story h1 { font-size: clamp(31px,9.4vw,53px); line-height: 1.3; letter-spacing: -.05em; }
#orb-story .description { font-size: 14px; line-height: 1.8; letter-spacing: 0; margin-top: 26px; max-width: 345px; text-wrap: pretty; }
#orb-story .desktop-break { display: none; }
#orb-story .hero-footer { left: 24px; right: 24px; bottom: 32px; }
#orb-story .demo-link { min-height: 46px; padding-left: 17px; font-size: 12px; gap: 13px; }
#orb-story .demo-arrow { width: 33px; height: 33px; }
#orb-story .paint-toggle { left: 24px; bottom: 32px; width: 32px; height: 32px; }
#orb-story .technology { padding: 78px 24px 104px; gap: 62px; }
#orb-story .orb-destination { width: min(78vw,320px); }
#orb-story .note-manager { top: 5px; left: 24px; width: 280px; }
#orb-story .note-assistant { top: calc(78px + min(78vw,320px) + 2px); left: 24px; width: 132px; height: 48px; }
#orb-story .note-line { top: calc(78px + min(78vw,320px) + 2px); right: 20px; width: 195px; height: 48px; }
#orb-story .note-crm { bottom: 16px; right: 24px; width: 195px; height: 64px; }
#orb-story .technology h2 { font-size: clamp(28px,8vw,40px); line-height: 1.25; }
#orb-story .technology-description { font-size: 14px; max-width: 300px; }
#orb-story .listen { height: 48px; font-size: 13px; }}
@media (max-width: 600px) and (max-height: 740px) {#orb-story .intro { padding-top: 38px; }
#orb-story { --diameter: min(156vw,86svh); }}
@media (prefers-reduced-motion: reduce) {#orb-story, #orb-story *, #orb-story *::before, #orb-story *::after { transition: none !important; }}