/* Presentation only. Public landing; no private dashboard or authentication styles. */ #publicView.lp-landing { --lp-ease:cubic-bezier(.22,1,.36,1); overflow:clip; } #publicView.lp-landing .reference-hero { background:radial-gradient(ellipse at 4% 43%,#e9f4ff 0,transparent 48%),linear-gradient(155deg,#f9fbff 0%,#eef5fc 49%,#f6f9fc 100%); } #publicView.lp-landing .reference-hero::before, #publicView.lp-landing .reference-hero::after { content:""; display:block; position:absolute; pointer-events:none; z-index:0; left:auto; bottom:auto; background:none; } #publicView.lp-landing .reference-hero::before { width:min(1100px,100vw); height:1000px; top:-270px; right:-180px; background:radial-gradient(ellipse at 56% 43%,#76b8f24d 0%,#b6dfff62 28%,#d6eafe40 49%,transparent 68%); border-radius:50%; } #publicView.lp-landing .reference-hero::after { width:950px; height:540px; top:115px; right:-430px; border:1px solid #8ab9e129; border-radius:50%; transform:rotate(-28deg); box-shadow:0 0 0 66px #a6caeb0c,0 0 0 67px #8ab9e118; } #publicView.lp-landing .ref-hero-container { position:relative; z-index:1; } #publicView.lp-landing .ref-title { color:#06245a; } #publicView.lp-landing .lp-title-accent { color:#126fc5; background:linear-gradient(110deg,#06245a 4%,#0759ae 48%,#2587cd 87%,#1257a3); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; } #publicView.lp-landing .lp-hero-aside { border-image:linear-gradient(transparent,#5d9ed2,transparent) 1; } #publicView.lp-landing .lp-hero-kicker > span { box-shadow:0 0 0 5px #126fc50d,0 0 15px #2d91dd55; } #publicView.lp-landing :is(.ref-primary,.lp-button:not(.lp-button-secondary),.landing-button-primary) { background:linear-gradient(120deg,#187ed4,#0960bb 65%,#0753a7); border-color:#0b65bd; box-shadow:inset 0 1px 0 #ffffff35,0 5px 12px #105eac18,0 1px 2px #06245a18; transition:transform .25s var(--lp-ease),box-shadow .25s,background .25s; } #publicView.lp-landing :is(.ref-primary,.lp-button:not(.lp-button-secondary),.landing-button-primary):hover:not(:disabled) { transform:translateY(-2px); background:linear-gradient(120deg,#1e87df,#0959b0); box-shadow:inset 0 1px 0 #ffffff40,0 9px 22px #126fc530; } #publicView.lp-landing :is(.ref-primary,.lp-button,.landing-button):active:not(:disabled) { transform:translateY(0) scale(.985); } #publicView.lp-landing :is(.ref-primary,.lp-button,.landing-button) > :is(svg,span[aria-hidden]) { transition:transform .3s var(--lp-ease); } #publicView.lp-landing :is(.ref-primary,.lp-button,.landing-button):hover > :is(svg,span[aria-hidden]) { transform:translateX(3px); } #publicView.lp-landing :is(.landing-button-secondary,.lp-button-secondary) { background:linear-gradient(130deg,#fff,#f5faff); box-shadow:inset 0 1px 0 white,0 3px 8px #06245a08; } #publicView.lp-landing .ref-browser { border:1px solid #ffffffdc; background:linear-gradient(130deg,#f8fcffdb,#dbe7f3c9); box-shadow:0 35px 75px -32px #124d8b40,0 12px 30px -18px #16559c30,0 0 0 1px #a9c5df50; } #publicView.lp-landing .ref-browser-bar { background:linear-gradient(105deg,#e8eef6e8,#e0eaf5d9 60%,#e9f2fae0); border-bottom:1px solid #ccdeed; } #publicView.lp-landing .ref-browser-body { background:linear-gradient(145deg,#eff5fba6,#e5eef7a6); } #publicView.lp-landing .ref-product-screen { border-color:#cfdde9; box-shadow:0 10px 35px -20px #17477838,inset 0 1px 0 white; } #publicView.lp-landing #heroTabbedDemo .ref-tab { transition:background .24s,box-shadow .24s,color .24s; } #publicView.lp-landing #heroTabbedDemo .ref-tab[aria-selected="true"] { background:linear-gradient(145deg,#fff,#f3f9ff); border-color:#b7d3ec; box-shadow:0 3px 10px #0a52951a,inset 0 1px 0 #fff; } #publicView.lp-landing #heroTabbedDemo .ref-tab:hover { background:#ffffff91; } #publicView.lp-landing .ref-screen-header { background:linear-gradient(100deg,#fff,#f8fbff); } #publicView.lp-landing .lp-screen-demo { color:#4c7391; } #publicView.lp-landing .lp-start-canvas { background:radial-gradient(ellipse at 90% 75%,#9ecff450,transparent 70%),linear-gradient(135deg,#edf6fe,#deecf8); } #publicView.lp-landing .lp-goal-ticket { background:linear-gradient(125deg,#fff,#f9fcff); border-color:#fff; box-shadow:0 10px 30px -12px #245b9133,0 0 0 1px #aacbe030; } #publicView.lp-landing .lp-next-ticket { background:linear-gradient(120deg,#fff,#f3f9ff); border-color:#adcee9; box-shadow:0 5px 16px -8px #18558c24; } #publicView.lp-landing .lp-ticket-connector { border-left-color:#a2c5e3; } #publicView.lp-landing .lp-ticket-connector::after { width:5px; height:5px; box-shadow:0 0 0 3px #1d8ad218,0 0 9px #1789cf70; } #publicView.lp-landing .lp-mini-product { border:1px solid #ffffff90; box-shadow:0 4px 9px -6px #254e7533; transition:transform .3s var(--lp-ease),box-shadow .3s; } #publicView.lp-landing .lp-mini-product:hover { transform:translateY(-4px); box-shadow:0 9px 20px -10px #254e7555; } #publicView.lp-landing .lp-round-button { background:linear-gradient(135deg,#2188db,#0960b8); box-shadow:0 3px 8px #126fc52a; transition:transform .25s; } #publicView.lp-landing .lp-round-button:hover { transform:translateX(2px); } #publicView.lp-landing :is(.lp-journey-section,.lp-results-section) { background:radial-gradient(ellipse at 85% 38%,#e3effa 0%,transparent 60%),linear-gradient(#f7fafd,#f0f5fb); } #publicView.lp-landing :is(.lp-catalog-section,#producto) { background:linear-gradient(125deg,#fff 35%,#f3f8fe); } #publicView.lp-landing #diagramas { background:radial-gradient(ellipse at 15% 35%,#e2effc,transparent 65%),#f4f8fc; } #publicView.lp-landing #demo { background:linear-gradient(145deg,#fff,#f4f9fe); } #publicView.lp-landing #planes { background:radial-gradient(ellipse at 70% 45%,#e0eefc,transparent 60%),#f4f8fc; } #publicView.lp-landing .landing-closing { background:radial-gradient(ellipse at 90% 30%,#b3d7f661,transparent 60%),linear-gradient(125deg,#eef6ff,#f9fbff); } #publicView.lp-landing :is(.lp-journey,.lp-catalog-app,.lp-management,.lp-results-app) { box-shadow:0 22px 55px -35px #0e4f9145,0 2px 7px #06336a06; } #publicView.lp-landing :is(.lp-stage-visual,.lp-goal-aside,.lp-catalog-preview-wrap) { background:radial-gradient(ellipse at 85% 15%,#d5eafb70,transparent 65%),linear-gradient(140deg,#f4f9fe,#eaf2fa); } #publicView.lp-landing .lp-catalog-paper { box-shadow:0 15px 30px -16px #174c7b48,0 2px 7px #174c7b0c; } #publicView.lp-landing .lp-progress-ring { box-shadow:0 5px 20px #126fc512; } #publicView.lp-landing :is(.lp-stage-tabs button,.lp-management-nav button,.lp-tool-launchers button) { transition:background .25s,color .25s,box-shadow .25s; } #publicView.lp-landing :is(.lp-stage-tabs button,.lp-management-nav button):hover { background:#edf5fd; } #publicView.lp-landing .lp-management-nav button[aria-selected="true"] { background:linear-gradient(100deg,#e4f0fd,#f8fbff); } #publicView.lp-landing .lp-stage-tabs button[aria-selected="true"]::after { background:linear-gradient(90deg,#126fc5,#78bee9); } #publicView.lp-landing .lp-five-dots > .is-done { background:linear-gradient(135deg,#2786d8,#0962bb); box-shadow:0 3px 9px #126fc51b; } #publicView.lp-landing .lp-operation-chain.is-updated > div { background:linear-gradient(135deg,#f1f8ff,#eaf4fc); border-color:#bad9ef; } #publicView.lp-landing .landing-plan { transition:transform .3s var(--lp-ease),box-shadow .3s; } #publicView.lp-landing .landing-plan:hover { transform:translateY(-4px); box-shadow:0 20px 45px -25px #0b4c8a35; } #publicView.lp-landing #heroTabbedDemo .ha-orb { box-shadow:inset 0 0 0 1px #ffffff85,inset -7px -9px 16px #001d6555,0 12px 25px #126fc540,0 0 34px #3b9ce31a; } #publicView.lp-landing #heroTabbedDemo .ha-orb-halo { background:radial-gradient(circle,#68b4fc40 40%,#b6dfff16 67%,transparent 74%); border-color:#6eb7ef60; } /* The demo caption remains aligned at every viewport width. */ #publicView.lp-landing .lp-demo-caption { flex-wrap:wrap; } #publicView.lp-landing .lp-demo-caption > span:last-child { margin-left:auto; } /* Motion starts automatically after JS initialization; static fallback stays complete. */ #publicView.lp-landing.lp-motion-on .reference-hero::before { animation:lp-light-drift 18s ease-in-out infinite alternate; } #publicView.lp-landing.lp-motion-on .lp-hero-kicker { animation:lp-soft-enter .7s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .ref-title { animation:lp-soft-enter 1s .08s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .ref-intro-row { animation:lp-soft-enter 1s .18s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .ref-browser { animation:lp-panel-arrive 1.15s .28s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .ref-panel.is-entering { animation:lp-soft-enter .65s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on #hero-panel-start:not([hidden]) .lp-goal-ticket { animation:lp-soft-enter .85s .18s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on #hero-panel-start:not([hidden]) .lp-next-ticket { animation:lp-soft-enter .85s .32s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on #hero-panel-start:not([hidden]) .lp-mini-product { animation:lp-soft-enter .8s .44s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on #hero-panel-start:not([hidden]) .lp-mini-product:nth-child(2) { animation-delay:.54s; } #publicView.lp-landing.lp-motion-on #hero-panel-start:not([hidden]) .lp-mini-product:nth-child(3) { animation-delay:.64s; } #publicView.lp-landing.lp-motion-on .lp-ticket-connector::after { animation:lp-route-travel 2.8s ease-in-out infinite; } #publicView.lp-landing.lp-motion-on .lp-status-dot { animation:lp-status-breathe 3.4s ease-in-out infinite; } #publicView.lp-landing.lp-motion-on :is(.lp-stage-copy,.lp-stage-visual,.lp-tool-screen-head) { animation:lp-soft-enter .55s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .lp-stage-visual { animation-delay:.08s; } #publicView.lp-landing.lp-motion-on .lp-operation-chain.is-updated > div { animation:lp-confirm-light .85s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .lp-operation-chain.is-updated > div:nth-of-type(2) { animation-delay:.12s; } #publicView.lp-landing.lp-motion-on .lp-operation-chain.is-updated > div:nth-of-type(3) { animation-delay:.24s; } #publicView.lp-landing.lp-motion-on .lp-five-dots > .is-done { animation:lp-check-arrive .45s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on #heroTabbedDemo .ha-voice[data-voice-state="idle"] .ha-orb { animation:lp-orb-float 5s ease-in-out infinite; } #publicView.lp-landing.lp-motion-on #heroTabbedDemo .ha-voice[data-voice-state="idle"] .ha-orb-current-one { animation-duration:14s; animation-play-state:running; } #publicView.lp-landing.lp-motion-on #heroTabbedDemo .ha-voice[data-voice-state="idle"] .ha-orb-current-two { animation-duration:7s; animation-play-state:running; } #publicView.lp-landing.lp-motion-on #heroTabbedDemo .ha-voice[data-voice-state="idle"] .ha-orb-ribbon { animation-duration:9s; animation-play-state:running; } #publicView.lp-landing.lp-motion-on #heroTabbedDemo .ha-voice[data-voice-state="idle"] .ha-orb-halo { animation:lp-halo-breathe 5s ease-in-out infinite; } #publicView.lp-landing.lp-motion-on #heroTabbedDemo .ha-voice[data-voice-state="idle"] .ha-orb-shadow { animation:lp-orb-shadow 5s ease-in-out infinite; } /* The opening scene gains depth as the visitor moves down the page. */ #publicView.lp-landing .lp-reveal-line { display:block; overflow:clip; padding:.12em .035em .16em; margin:-.12em -.035em -.16em; } #publicView.lp-landing .lp-reveal-ink { display:block; transform-origin:left bottom; } #publicView.lp-landing .lp-hero-depth { position:relative; transform-origin:center top; } #publicView.lp-landing.lp-motion-on .lp-hero-depth { transform:perspective(1800px) translateY(var(--lp-hero-lift,30px)) rotateX(var(--lp-hero-tilt,7deg)) scale(var(--lp-hero-scale,.945)); } #publicView.lp-landing.lp-motion-on .ref-title { animation:none; translate:0 calc(var(--lp-heading-shift,0px) * -1); } #publicView.lp-landing.lp-motion-on .ref-title .lp-reveal-ink { animation:lp-title-arrive 1.25s .08s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .ref-title .lp-reveal-line:nth-child(2) .lp-reveal-ink { animation-delay:.24s; } #publicView.lp-landing.lp-motion-on .ref-intro-row { translate:0 calc(var(--lp-heading-shift,0px) * -.4); } #publicView.lp-landing.lp-motion-on .ref-browser { animation:lp-panel-arrive 1.4s .36s var(--lp-ease) both; } /* A normal document flow on smaller screens; a scroll-driven scene when it fits. */ #publicView.lp-landing .lp-scroll-track { position:relative; } #publicView.lp-landing .lp-scroll-guide, #publicView.lp-landing .lp-scroll-meter { display:none; } #publicView.lp-landing.lp-scroll-pin .lp-scroll-track { height:calc(var(--lp-story-height,600px) + var(--lp-story-travel,1200px)); } #publicView.lp-landing.lp-scroll-pin .lp-journey { position:sticky; top:96px; box-shadow:0 28px 65px -36px #0e4f9155,0 2px 8px #06336a0a; } #publicView.lp-landing.lp-scroll-pin .lp-scroll-guide { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:47px; padding:10px 25px; color:#587791; background:linear-gradient(110deg,#edf6ff,#f9fcff); font-size:11px; border-bottom:1px solid #dbe8f3; } #publicView.lp-landing .lp-scroll-guide > span { display:flex; align-items:center; gap:10px; } #publicView.lp-landing .lp-scroll-guide b { font-size:10px; font-variant-numeric:tabular-nums; letter-spacing:.08em; margin-left:8px; color:#126fc5; } #publicView.lp-landing .lp-scroll-guide a { color:#176fc0; text-decoration:none; display:inline-flex; gap:12px; align-items:center; } #publicView.lp-landing .lp-scroll-guide a:hover { text-decoration:underline; text-underline-offset:4px; } #publicView.lp-landing .lp-scroll-cue { font-size:17px; color:#126fc5; } #publicView.lp-landing.lp-scroll-pin .lp-scroll-meter { display:block; height:3px; background:#eaf2fa; } #publicView.lp-landing .lp-scroll-meter::before { content:""; display:block; height:100%; transform:scaleX(var(--lp-story-progress,0)); transform-origin:left; background:linear-gradient(90deg,#0e62ba,#45a6e6); } #publicView.lp-landing.lp-motion-on .lp-scroll-cue { animation:lp-scroll-hint 2.8s ease-in-out infinite; } #publicView.lp-landing.lp-scroll-pin .lp-stage-copy { animation:lp-scene-copy .75s var(--lp-ease) both; } #publicView.lp-landing.lp-scroll-pin .lp-stage-visual { animation:lp-scene-visual .95s .08s var(--lp-ease) both; } #publicView.lp-landing.lp-scroll-pin .lp-stage-content { animation:none; } #publicView.lp-landing.lp-scroll-pin .lp-stage-content { height:425px; min-height:0; padding:30px 36px; gap:36px; } #publicView.lp-landing.lp-scroll-pin .lp-stage-visual { min-height:0; } #publicView.lp-landing.lp-scroll-pin .lp-stage-copy h3 { font-size:30px; } #publicView.lp-landing.lp-scroll-pin .lp-stage-tabs button { padding-block:18px; } #publicView.lp-landing.lp-motion-on .lp-stage-products > div { animation:lp-product-unfold .85s .18s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .lp-stage-products > div:nth-child(2) { animation-delay:.28s; } #publicView.lp-landing.lp-motion-on .lp-stage-products > div:nth-child(3) { animation-delay:.38s; } #publicView.lp-landing.lp-motion-on .lp-stage-tasks li { animation:lp-soft-enter .65s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .lp-stage-tasks li:nth-child(2) { animation-delay:.08s; } #publicView.lp-landing.lp-motion-on .lp-stage-tasks li:nth-child(3) { animation-delay:.16s; } #publicView.lp-landing.lp-motion-on .lp-stage-tasks li:nth-child(4) { animation-delay:.24s; } #publicView.lp-landing.lp-motion-on .lp-stage-tasks li:nth-child(5) { animation-delay:.32s; } #publicView.lp-landing.lp-motion-on .lp-stage-catalog { animation:lp-product-unfold .95s .12s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .lp-lines-arrived li { animation:lp-soft-enter .7s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .lp-lines-arrived li::after { transform-origin:top; animation:lp-line-draw .65s var(--lp-ease) both; } #publicView.lp-landing.lp-motion-on .lp-lines-arrived li:nth-child(2), #publicView.lp-landing.lp-motion-on .lp-lines-arrived li:nth-child(2)::after { animation-delay:.12s; } #publicView.lp-landing.lp-motion-on .lp-lines-arrived li:nth-child(3), #publicView.lp-landing.lp-motion-on .lp-lines-arrived li:nth-child(3)::after { animation-delay:.24s; } #publicView.lp-landing.lp-motion-on .lp-lines-arrived li:nth-child(4), #publicView.lp-landing.lp-motion-on .lp-lines-arrived li:nth-child(4)::after { animation-delay:.36s; } #publicView.lp-landing.lp-motion-on .lp-lines-arrived li:nth-child(5), #publicView.lp-landing.lp-motion-on .lp-lines-arrived li:nth-child(5)::after { animation-delay:.48s; } @keyframes lp-title-arrive { from { opacity:0; transform:translateY(105%) rotate(2deg); } to { opacity:1; transform:translateY(0) rotate(0); } } @keyframes lp-scene-copy { from { opacity:0; transform:translate(calc(-20px * var(--lp-scene-direction,1)),22px); } to { opacity:1; transform:translate(0,0); } } @keyframes lp-scene-visual { from { opacity:0; transform:perspective(1100px) translate(calc(35px * var(--lp-scene-direction,1)),18px) rotateY(-5deg) scale(.96); } to { opacity:1; transform:perspective(1100px) translate(0,0) rotateY(0) scale(1); } } @keyframes lp-scroll-hint { 0%,100% { transform:translateY(-2px); } 50% { transform:translateY(3px); } } @keyframes lp-product-unfold { from { opacity:0; transform:translateY(22px) rotate(-3deg) scale(.95); } to { opacity:1; transform:translateY(0) rotate(0) scale(1); } } @keyframes lp-line-draw { from { transform:scaleY(0); } to { transform:scaleY(1); } } @keyframes lp-light-drift { from { transform:translate3d(-35px,-12px,0) scale(.96); } to { transform:translate3d(45px,65px,0) scale(1.1); } } @keyframes lp-soft-enter { from { opacity:0; transform:translate3d(0,16px,0); } to { opacity:1; transform:translate3d(0,0,0); } } @keyframes lp-panel-arrive { from { opacity:0; transform:translate3d(0,26px,0) scale(.99); } to { opacity:1; transform:translate3d(0,0,0) scale(1); } } @keyframes lp-route-travel { 0%,15% { transform:translateY(-18px); opacity:0; } 35% { opacity:1; } 80%,100% { transform:translateY(0); opacity:0; } } @keyframes lp-status-breathe { 0%,100% { box-shadow:0 0 0 3px #126fc50c; } 50% { box-shadow:0 0 0 6px #126fc517; } } @keyframes lp-confirm-light { from { box-shadow:0 0 0 3px #258bd337; transform:translateY(4px); } to { box-shadow:0 0 0 0 #258bd300; transform:translateY(0); } } @keyframes lp-check-arrive { from { opacity:.45; transform:scale(.83); } to { opacity:1; transform:scale(1); } } @keyframes lp-orb-float { 0%,100% { transform:translateY(-2px); } 50% { transform:translateY(-7px); } } @keyframes lp-halo-breathe { 0%,100% { opacity:.6; transform:scale(.96); } 50% { opacity:1; transform:scale(1.05); } } @keyframes lp-orb-shadow { 0%,100% { opacity:.8; transform:scale(1); } 50% { opacity:.45; transform:scale(.85); } } /* Pausing never hides content. Offscreen and hidden-tab effects stop spending frames. */ #publicView.lp-landing.lp-motion-paused *, #publicView.lp-landing.lp-motion-paused *::before, #publicView.lp-landing.lp-motion-paused *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } #publicView.lp-landing.lp-motion-backgrounded *, #publicView.lp-landing.lp-motion-backgrounded *::before, #publicView.lp-landing.lp-motion-backgrounded *::after, #publicView.lp-landing.lp-motion-on .lp-motion-offscreen *, #publicView.lp-landing.lp-motion-on .lp-motion-offscreen *::before, #publicView.lp-landing.lp-motion-on .lp-motion-offscreen *::after, #publicView.lp-landing.lp-motion-on .lp-motion-offscreen::before { animation-play-state:paused!important; } @media (max-width:760px) { #publicView.lp-landing .reference-hero::before { width:800px; height:760px; top:-80px; right:-440px; opacity:.75; } #publicView.lp-landing .reference-hero::after { right:-740px; top:210px; opacity:.5; } #publicView.lp-landing .ref-browser { box-shadow:0 20px 38px -24px #124d8b40,0 0 0 1px #b1cde350; } #publicView.lp-landing .lp-demo-caption { gap:8px; } #publicView.lp-landing .lp-demo-caption > span:last-child { width:100%; justify-content:space-between; flex-wrap:wrap; margin:0; } #publicView.lp-landing .lp-demo-caption > span:last-child > svg { display:none; } #publicView.lp-landing .lp-demo-prompt { font-size:10px; } #publicView.lp-landing.lp-motion-on .ref-title .lp-reveal-ink { animation-duration:.85s; } #publicView.lp-landing.lp-motion-on .lp-hero-depth { transform:translateY(var(--lp-hero-lift,12px)) scale(var(--lp-hero-scale,.98)); } } @media (prefers-reduced-motion:reduce) { #publicView.lp-landing *,#publicView.lp-landing *::before,#publicView.lp-landing *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }