/* Reference-led landing hero: live canvas + code-native illustrative dashboard.
   Scoped to the public page; never affects authenticated workspaces. */
html[data-theme] .lp-reference .lp-nav,
html[data-theme] .lp-reference .lp-nav.is-scrolled{background:rgba(5,13,31,.96)!important;border-bottom:0!important;box-shadow:none}
.lp-reference .lp-nav-inner{max-width:1010px;min-height:68px;padding:8px 20px;gap:36px}
.lp-reference .lp-nav .lp-brand{position:relative;overflow:hidden;width:160px;height:48px;flex-shrink:0}
html[data-theme] .lp-reference .lp-nav .lp-brand-img{position:absolute;left:-15px;top:-39px;filter:brightness(0) invert(1);height:126px!important;width:190px!important;object-fit:contain;max-width:none;margin:0}
.lp-reference .lp-nav-links{gap:30px;margin-left:28px}
html[data-theme] .lp-reference .lp-nav-links a,html[data-theme] .lp-reference .lp-nav-cta a{color:#e2e8f7!important;font-size:12px}
.lp-reference .lp-nav-links a{display:inline-flex;align-items:center;min-height:44px;gap:8px}
.lp4-chevron{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5}
html[data-theme] .lp-reference .lp-nav-cta .lp-btn-primary{background:linear-gradient(110deg,#2ba8fa,#445dff 55%,#9951f6)!important;color:white!important;border:1px solid #7b88ff;border-radius:18px;min-height:44px;padding:10px 23px;box-shadow:0 0 28px #2968ff35}
html[data-theme] .lp-reference .lp-theme-toggle{width:44px;height:44px;background:transparent;color:#adc2ec;border-color:#263957;opacity:.8;flex-shrink:0}
.lp4-symbols{position:absolute;pointer-events:none}
html[data-theme] .lp-reference .lp4-hero{padding:0!important;margin:0;overflow:hidden;background:#061329!important;color:#f4f8ff!important;isolation:isolate}
html[data-theme] .lp-reference .lp4-hero::before{background-image:linear-gradient(rgba(96,165,250,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.035) 1px,transparent 1px)!important;background-size:64px 64px;mask-image:none;-webkit-mask-image:none}
.lp4-hero::after{display:none}
.lp4-hero-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:22px;max-width:1640px;margin:auto;align-items:center;padding:0 4.5% 0 0;position:relative;z-index:1}
.lp4-visual{margin:0;min-width:0;position:relative;padding:0 0 4px}
/* Shrink the complete desktop illustration without shifting the copy or globe. */
@media(min-width:961px){.lp4-visual{transform:scale(.8);transform-origin:center center}}
.lp4-scene{width:100%;aspect-ratio:800/580;position:relative;container-type:inline-size;isolation:isolate}
.lp4-scene::after{content:"";position:absolute;inset:75% 0 4%;background:radial-gradient(ellipse,#2c53fa45,transparent 65%);filter:blur(14px);z-index:-1}
/* Small upper-right globe accent, separate from the dashboard illustration. */
html[data-theme] .lp4-hero .lp4-globe-accent{--globe-land:112,190,255;--globe-ocean:26,80,170;--globe-glow:20,103,255;position:absolute;width:clamp(180px,12vw,240px);top:clamp(70px,5vw,96px);right:clamp(12px,1vw,24px);left:auto;margin:0!important;max-width:none;filter:drop-shadow(0 0 3px #268cff70);z-index:2;pointer-events:none}
@media(max-width:1799px){html[data-theme] .lp4-hero .lp4-globe-accent{width:72px;top:0;right:24px}}
.lp4-orbits{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
.lp4-orbit-stars{animation:lp4-twinkle 4s ease-in-out infinite alternate}
@keyframes lp4-twinkle{to{opacity:.45}}
.lp4-dashboard{position:absolute;left:16.5%;top:12%;width:72%;transform:perspective(1200px) rotateY(13deg) rotateX(5deg) rotateZ(6deg);transform-origin:50% 75%;border:2px solid #648bc8;border-radius:20px;background:#070e21;box-shadow:-7px 5px 0 #08132b,-10px 5px 0 #345b8c,-14px 6px 16px #082554,0 0 25px #2865ff55,0 25px 50px #0009;overflow:hidden}
.lp4-dashboard-svg{width:100%;display:block}
.lp4-float{position:absolute;width:7%;aspect-ratio:1;border:1px solid #7b9aff;border-radius:24%;display:grid;place-items:center;background:linear-gradient(140deg,#122858ed,#153981ad);box-shadow:inset 0 0 9px #72bbff65,0 0 16px #1c59ff70;color:#c9e1ff;transform:rotate(9deg);z-index:2}
.lp4-float svg{width:56%;height:56%;filter:drop-shadow(0 0 5px #648eff)}
.lp4-scene.is-orbiting .lp4-float{left:0;top:0;will-change:transform;transition:none!important;pointer-events:none}
.lp4-float-people{top:0;left:10%}.lp4-float-chart{top:6%;left:76%;transform:rotate(-5deg);background:linear-gradient(140deg,#191e60,#171b46)}
.lp4-float-cloud{top:17%;left:90%}.lp4-float-gear{top:43%;left:88%;background:linear-gradient(140deg,#242176,#14183b)}
.lp4-metric-cards{position:absolute;left:10%;right:1%;bottom:9%;display:grid;grid-template-columns:1fr 1.16fr 1.05fr;gap:1.6%;align-items:end;z-index:4}
.lp4-metric{position:relative;min-width:0;height:17.5cqw;border:1px solid #4c80bb;border-radius:1.5cqw;padding:1.5cqw 1.3cqw;background:linear-gradient(145deg,#10294bea,#0a142cec 65%);box-shadow:0 0 12px #4389ed45,inset 0 1px 0 #81c6ff35,0 14px 22px #0008;display:grid;grid-template-columns:4.6cqw 1fr;column-gap:1.2cqw;transform:rotate(3deg);backdrop-filter:blur(16px);color:#f3f6ff}
.lp4-metric:nth-child(2){transform:translateY(1cqw) rotate(1deg);height:17cqw}.lp4-metric:nth-child(3){transform:rotate(-2deg);height:16.5cqw}
.lp4-metric-icon{width:4.6cqw;height:4.6cqw;padding:1cqw;border-radius:1cqw;background:linear-gradient(130deg,#30528b,#15295b);color:#bddaff;box-shadow:inset 0 1px 1px #73bfff55}
.lp4-metric-icon svg{width:100%;height:100%}.lp4-metric-info{display:flex;flex-direction:column;gap:.7cqw}.lp4-metric-label{font-size:1.35cqw;white-space:nowrap;color:#c6d8fa;font-weight:500}.lp4-metric-info strong{font-size:2.6cqw;letter-spacing:-.07em;line-height:1.1;color:#fff}.lp4-metric-detail{font-size:1.15cqw;color:#b6c8e9;white-space:nowrap}
.lp4-metric-growth{position:absolute;right:1.4cqw;top:8.6cqw;font-size:1.1cqw;color:#0de6b1}
.lp4-mini-bars{grid-column:1/-1;height:4.7cqw;display:flex;align-items:end;gap:.65cqw;margin-top:1cqw}.lp4-mini-bars i{height:var(--bar);flex:1;border-radius:.3cqw .3cqw .1cqw .1cqw;background:linear-gradient(#22d5ff,#2156f3);box-shadow:inset 0 1px 1px #a0f0ff70}.lp4-tint-teal .lp4-mini-bars i{background:linear-gradient(#06edc0,#008976)}.lp4-tint-purple .lp4-mini-bars i{background:linear-gradient(#b28bff,#5538e9)}
.lp4-visual figcaption{position:absolute;bottom:0;left:14%;font-size:9px;letter-spacing:.03em;color:#7b91b6}
.lp4-copy{padding:30px 0 28px;min-width:0}
.lp4-eyebrow{display:inline-flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid #23395a;border-radius:30px;background:#071326b3;color:#bbcce5;font-size:clamp(8px,.72vw,11px);font-weight:600;letter-spacing:.07em;box-shadow:inset 0 0 12px #2e6bd01a}
.lp4-eyebrow>span{width:6px;height:6px;border-radius:50%;background:#3db6ff;box-shadow:0 0 10px #26aaff}.lp4-eyebrow svg{display:block}
.lp4-copy h1{font-size:clamp(38px,4.35vw,72px);line-height:.99;letter-spacing:-.045em;font-weight:850;color:#fff!important;margin:23px 0 20px;white-space:nowrap}
.lp4-copy h1 em{display:inline-block;position:relative;font-style:normal;padding-bottom:6px;background:linear-gradient(100deg,#30c8f1 0%,#4f9bfb 56%,#a359f8 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lp4-copy h1 em::after{content:"";position:absolute;left:3%;right:8%;height:10px;bottom:-2px;border-top:3px solid #42c6ff;border-radius:50%;transform:rotate(1deg);filter:drop-shadow(24px 1px 0 #7956ff);opacity:.8}
.lp4-copy>p{font-size:clamp(14px,1.23vw,18px);line-height:1.52;color:#bac7df!important;margin:0;max-width:590px}
.lp4-actions{display:flex;gap:14px;margin:24px 0 23px}.lp4-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border-radius:13px;padding:14px 16px;font-size:clamp(12px,1vw,15px);line-height:1.1;font-weight:650;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.lp4-actions .lp4-primary{background:linear-gradient(110deg,#2db4f8,#436aff 48%,#9755fa);border:1px solid #658bff;box-shadow:0 0 26px #2c6bff40,inset 0 1px 1px #ffffff30;flex:1}.lp4-primary span{font-size:23px;margin-left:12px;font-weight:400}.lp4-actions .lp4-secondary{border:1px solid #637dbb;background:linear-gradient(#101a3533,#030b19);flex:1}
.lp4-actions a:is(:link,:visited,:hover,:focus,:active){color:#fff!important}.lp4-actions a:hover{transform:translateY(-2px);box-shadow:0 0 28px #506dff50}
.lp4-trust{display:grid;grid-template-columns:1.2fr 1.1fr 1fr;gap:12px;list-style:none;padding:0;margin:0;color:#bcc9e3;font-size:clamp(10px,.88vw,13px);line-height:1.6}.lp4-trust li{display:flex;gap:9px;align-items:flex-start}.lp4-trust li>span{display:grid;place-items:center;flex:none;width:25px;height:25px;border:1px solid #288dff;border-radius:50%;color:#42caff;font-size:16px;box-shadow:0 0 8px #1e69f733}
.lp4-module-dock{max-width:1030px;margin:0 auto;padding:12px 20px 25px;display:grid;grid-template-columns:repeat(8,1fr);position:relative;z-index:2;gap:12px}
.lp4-module-dock::before{content:"";position:absolute;inset:15% -20% -100%;border:1px solid #173e6b66;border-radius:180px 180px 0 0;pointer-events:none}
.lp4-module{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;color:#e7edfa!important;min-height:85px}.lp4-module:not(:last-child)::after{content:"";position:absolute;width:1px;height:31px;right:-6px;top:14px;background:#30476f}
.lp4-module>span{width:54px;height:54px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--lp4-icon-color,#328eff);background:linear-gradient(135deg,color-mix(in srgb,var(--lp4-icon-color,#328eff) 20%,#061129),#061129);box-shadow:inset 0 0 18px color-mix(in srgb,var(--lp4-icon-color,#328eff) 20%,transparent),0 0 15px color-mix(in srgb,var(--lp4-icon-color,#328eff) 12%,transparent);transition:transform .2s}
.lp4-module svg{width:27px;height:27px;color:var(--lp4-icon-color,#328eff);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--lp4-icon-color,#328eff) 70%,transparent))}.lp4-module strong{font-size:12px;font-weight:500;text-align:center}.lp4-module:hover>span{transform:translateY(-4px)}
.lp4-tint-blue{--lp4-icon-color:#32a5ff}.lp4-tint-teal{--lp4-icon-color:#0de0c6}.lp4-tint-purple{--lp4-icon-color:#a365ff}.lp4-tint-orange{--lp4-icon-color:#e9996d}.lp4-tint-pink{--lp4-icon-color:#ee55bd}
.lp4-hero a:focus-visible{outline:3px solid #7cd9ff!important;outline-offset:5px}.lp-reference [id^="lp-module-"]{scroll-margin-top:110px}
@media(min-width:1600px){.lp4-hero-grid{padding-right:30px;gap:26px;grid-template-columns:1.45fr 1fr}.lp4-copy h1{font-size:66px}.lp4-copy>p{font-size:18px}.lp4-scene{margin-top:5px}.lp4-module-dock{margin-top:0}}
@media(max-width:1100px) and (min-width:961px){.lp4-hero-grid{gap:16px;padding-right:24px;grid-template-columns:1.08fr 1fr}.lp4-copy h1{font-size:4.4vw}.lp4-actions{gap:8px}.lp4-actions a{padding:12px;font-size:11px}.lp4-trust{gap:7px;font-size:9px}.lp4-trust li{gap:5px}.lp4-trust li>span{width:20px;height:20px}.lp-reference .lp-nav-inner{gap:15px}.lp-reference .lp-nav-links{gap:20px;margin-left:0}}
@media(max-width:960px){.lp4-hero-grid{grid-template-columns:1fr;padding:20px 24px 0;gap:0}.lp4-copy{grid-row:1;text-align:center;max-width:660px;margin:auto;padding:20px 0 10px}.lp4-copy h1{font-size:clamp(38px,7vw,62px)}.lp4-copy>p{font-size:16px;margin:auto}.lp4-actions{justify-content:center}.lp4-actions a{flex:none!important;min-width:210px}.lp4-trust{font-size:12px;text-align:left;max-width:560px;margin:auto}.lp4-visual{max-width:760px;width:100%;margin:22px auto 0}.lp4-module-dock{padding-top:20px;margin-top:10px;max-width:780px;gap:8px}.lp4-module strong{font-size:10px}.lp4-module>span{width:48px;height:48px}.lp4-hero::after{display:none}.lp-reference .lp-nav-inner{min-height:70px;padding:8px 22px}.lp-reference .lp-nav-links{gap:18px;margin-left:0}.lp-reference .lp-nav .lp-brand-img{width:138px!important;height:46px!important}}
@media(max-width:600px){.lp-reference .lp-nav-inner{gap:8px;padding:8px 16px}.lp-reference .lp-nav .lp-brand-img{width:123px!important;height:42px!important}.lp-reference .lp-nav-cta{gap:6px}.lp-reference .lp-nav-cta .lp-btn-link{padding:8px;font-size:11px!important}.lp-reference .lp-nav-cta .lp-btn-primary{padding:8px 12px!important;font-size:11px!important;border-radius:13px!important}.lp-reference .lp-theme-toggle{width:26px!important;height:30px!important}.lp4-hero-grid{padding:12px 20px 0}.lp4-copy h1{font-size:clamp(31px,7.9vw,47px);margin:22px 0 20px;line-height:1.05}.lp4-copy>p{font-size:14px}.lp4-actions{gap:10px;margin:22px 0}.lp4-actions a{font-size:12px;padding:12px 10px;min-width:0;flex:1!important}.lp4-primary span{margin-left:6px;font-size:19px}.lp4-trust{font-size:9px;gap:9px;grid-template-columns:1.2fr 1.1fr 1fr}.lp4-trust li{gap:5px}.lp4-trust li>span{height:17px;width:17px;font-size:12px}.lp4-visual{width:calc(100% + 32px);max-width:none;margin-left:-16px;margin-top:20px}.lp4-dashboard{border-radius:10px;box-shadow:-4px 3px 0 #08132b,-6px 3px 0 #345b8c,0 0 15px #2865ff55}.lp4-module-dock{grid-template-columns:repeat(4,1fr);gap:16px 10px;margin-top:25px;padding:15px 20px 28px}.lp4-module:nth-child(4)::after{display:none}.lp4-module strong{font-size:11px}.lp4-visual figcaption{font-size:8px;bottom:-10px;left:12%}}
@media(prefers-reduced-motion:reduce){.lp4-orbit-stars{animation:none}.lp4-actions a,.lp4-module>span{transition:none}.lp4-actions a:hover,.lp4-module:hover>span{transform:none}}
@media(max-width:600px){html[data-theme] .lp4-hero .lp4-globe-accent{top:10px;right:20px}.lp4-hero .lp4-hero-grid{padding-top:100px}}
/* The source logo has generous transparent padding: crop in layout, never stretch it. */
@media(max-width:960px){html[data-theme] .lp-reference .lp-nav .lp-brand-img{width:170px!important;height:113px!important;left:-13px;top:-32px}.lp-reference .lp-nav .lp-brand{width:144px}}
@media(max-width:600px){html[data-theme] .lp-reference .lp-nav .lp-brand-img{width:144px!important;height:96px!important;left:-12px;top:-24px}.lp-reference .lp-nav .lp-brand{width:120px}html[data-theme] .lp-reference .lp-theme-toggle{width:44px!important;height:44px!important}}
@media(max-width:360px){.lp-reference .lp-nav-inner{padding:8px 10px;gap:4px}.lp-reference .lp-nav .lp-brand{width:97px}html[data-theme] .lp-reference .lp-nav .lp-brand-img{width:120px!important;height:80px!important;left:-11px;top:-16px}.lp-reference .lp-nav-cta{gap:3px}.lp-reference .lp-nav-cta .lp-btn-link{padding:8px 4px}.lp-reference .lp-nav-cta .lp-btn-primary{padding:8px!important}.lp4-actions{flex-direction:column}.lp4-actions a{width:100%}.lp4-copy h1{font-size:29px}.lp4-trust{grid-template-columns:1fr;text-align:left;max-width:215px;font-size:11px;gap:10px}.lp4-trust br{display:none}}

/* Reference hero composition: message first, product experience second. */
@media(min-width:961px){
  .lp4-hero-grid{
    grid-template-columns:minmax(390px,.78fr) minmax(0,1.22fr);
    gap:clamp(24px,3.2vw,58px);
    max-width:1500px;
    padding:28px clamp(34px,4vw,72px) 30px;
  }
  .lp4-copy{
    grid-column:1;
    grid-row:1;
    align-self:center;
    padding:24px 0;
  }
  .lp4-visual{
    grid-column:2;
    grid-row:1;
    align-self:center;
    width:100%;
    transform:scale(.96);
    transform-origin:center center;
  }
  .lp4-copy h1{font-size:clamp(46px,4vw,64px);}
  .lp4-copy>p{max-width:560px;}
}