/* Reference-inspired, full-bleed workspace hero. */
.reference-hero{position:relative;isolation:isolate;overflow:hidden;background:#030a14;min-height:760px;color:#f4f7ff}
.reference-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}
.reference-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#020914f5 0%,#020914e8 28%,#020914aa 43%,#0209141a 65%,#02091405),linear-gradient(0deg,#020914d9,transparent 28%)}
.reference-layout{width:min(1530px,calc(100% - 112px));display:grid;grid-template-columns:46% 54%;align-items:center;position:relative;min-height:760px;padding:64px 0 76px}
.reference-copy{position:relative;z-index:3;min-width:0;padding-right:25px;animation:reference-enter .8s ease-out both}
.reference-copy .pill{font-size:11px;letter-spacing:1.8px;padding:11px 15px;background:#020a17b3;border-color:#1d9cff6b;color:#cad5eb}
.reference-copy h1{font-size:clamp(54px,5.2vw,88px);letter-spacing:-3.8px;line-height:1.04;margin:25px 0 23px;font-weight:700}
.reference-copy h1 .grad{background-image:linear-gradient(100deg,#27d5ed,#64aaff 50%,#b66afa)}
.reference-copy .heroText{font-size:clamp(16px,1.2vw,20px);line-height:1.75;color:#b8c5dd;max-width:575px;margin:0}
.reference-copy .actions{gap:18px;flex-wrap:wrap;margin:30px 0 42px}
.reference-copy .button{font-size:16px;padding:17px 24px;border-radius:13px;min-height:57px}
.reference-copy .primary{background:linear-gradient(110deg,#13bcf0,#4862fa 55%,#a644f7);border:1px solid #a0caff80;box-shadow:0 0 10px #27bdff80,0 0 30px #6d3bfc55,inset 0 1px #ffffff40}
.reference-copy .primary:hover{box-shadow:0 0 18px #27bdffaa,0 0 45px #6d3bfc80}
.reference-copy .secondary{background:#020b18b0;border:1px solid #339cff8c;color:#e5f1ff}
.reference-copy .stats{border:0;padding-top:8px;max-width:530px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.reference-copy .stats>div{padding:0 18px;border-right:1px solid #91b7fb29;min-width:0}.reference-copy .stats>div:first-child{padding-left:0}.reference-copy .stats>div:last-child{border:0}
.reference-copy .stats strong{font-size:28px;font-weight:700;color:#70baff}.reference-copy .stats>div:first-child strong{color:#36d9ef}.reference-copy .stats>div:last-child strong{color:#c6b2ff}.reference-copy .stats small{font-size:12px;line-height:1.6;color:#b2c0da}
.reference-stage{height:570px;position:relative;min-width:0;align-self:center}
.reference-card{position:absolute;display:flex;align-items:flex-start;gap:12px;width:220px;padding:18px 16px;border:2px solid transparent;border-radius:17px;background:linear-gradient(135deg,#163553,#182947 48%,#292044) padding-box,linear-gradient(125deg,#46dfff,#5485ff 48%,#ae70f5) border-box;backdrop-filter:blur(12px);box-shadow:inset 0 1px 12px #82abff1f,0 15px 35px #0005,0 0 15px #377bff16;animation:reference-float 6s ease-in-out infinite;transition:background .2s,box-shadow .2s}
.reference-card:hover,.reference-card:focus-visible{background:linear-gradient(135deg,#204667,#20345a 48%,#392a5b) padding-box,linear-gradient(125deg,#8cefff,#83a6ff 48%,#cd9bff) border-box;box-shadow:0 0 26px #3b98ff55;animation-play-state:paused;outline:2px solid #89d6ff;outline-offset:4px}
.reference-icon{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border:1px solid #567eff85;border-radius:50%;color:#37d2ff;background:radial-gradient(circle at 30% 20%,#238ceb60,#3639ae30);box-shadow:inset 0 0 12px #357fff25}.reference-icon svg{width:28px;height:28px;filter:drop-shadow(0 0 5px #178bff80)}
.reference-card b{display:block;font-size:15px;line-height:1.35;color:#f4f7ff;font-weight:600}.reference-card small{display:block;margin-top:9px;font-size:12px;line-height:1.5;color:#c2d0e8}
.reference-chat{top:100px;left:4%;rotate:-3deg}.reference-voice{top:270px;left:-3%;width:205px;rotate:-6deg;animation-delay:-1.5s}.reference-web{right:0;top:135px;rotate:-5deg;animation-delay:-3s}.reference-growth{right:-1%;top:320px;width:207px;rotate:-4deg;animation-delay:-4.5s}
.hero-scroll{position:absolute;bottom:26px;left:50%;display:flex;align-items:center;gap:12px;font-size:13px;color:#a9bdd9;transform:translateX(-50%);min-height:40px}.hero-scroll>span{height:30px;width:18px;border:1px solid #95b8e586;border-radius:12px;position:relative}.hero-scroll>span:before{content:'';position:absolute;left:7px;top:6px;height:7px;width:2px;border-radius:3px;background:#66c7ff;animation:reference-scroll 1.8s infinite}
@keyframes reference-float{0%,100%{translate:0 0}50%{translate:0 -9px}}@keyframes reference-enter{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}@keyframes reference-scroll{0%,100%{translate:0 0;opacity:.5}50%{translate:0 7px;opacity:1}}
@media(min-width:1550px){.reference-layout{min-height:820px}.reference-stage{height:620px}.reference-chat{top:130px}.reference-web{top:155px}.reference-voice{top:305px}.reference-growth{top:350px}}
@media(max-width:1200px) and (min-width:801px){.reference-layout{width:calc(100% - 64px);grid-template-columns:48% 52%}.reference-copy{padding-right:18px}.reference-copy h1{font-size:clamp(47px,5.2vw,62px);letter-spacing:-2.8px}.reference-copy .button{font-size:14px;padding-inline:18px}.reference-copy .actions{gap:10px}.reference-card{width:178px;padding:14px 12px;gap:9px}.reference-icon{width:35px;height:35px}.reference-icon svg{width:23px;height:23px}.reference-card b{font-size:13px}.reference-card small{font-size:11px}.reference-chat{left:0;top:75px}.reference-web{right:-8px;top:170px}.reference-voice{left:0;top:310px}.reference-growth{right:-8px;top:420px}}
@media(max-width:800px){.reference-layout{width:calc(100% - 48px);grid-template-columns:minmax(0,1fr);padding:40px 0 60px;min-height:0}.reference-copy{max-width:650px;padding:0}.reference-copy h1{font-size:clamp(50px,8.5vw,70px)}.reference-copy .heroText{max-width:610px}.reference-shade{background:linear-gradient(180deg,#020914fc 0%,#020914f5 32%,#02091435 65%,#020914b0 100%)}.reference-backdrop{top:auto;bottom:0;height:620px;object-position:75% center}.reference-stage{height:470px;width:100%;max-width:620px;justify-self:center;margin-top:24px}.reference-chat{top:28px;left:1%}.reference-web{top:52px;right:0}.reference-voice{top:205px;left:0}.reference-growth{top:245px;right:0}.hero-scroll{bottom:14px}.reference-copy .actions{margin-bottom:30px}}
@media(max-width:520px){.reference-layout{width:calc(100% - 36px);padding-top:32px}.reference-copy .pill{font-size:9px;letter-spacing:1px;padding:10px 11px}.reference-copy h1{font-size:clamp(42px,11.5vw,59px);letter-spacing:-2.6px;margin-block:23px}.reference-copy .heroText{font-size:16px;line-height:1.75}.reference-copy .actions{gap:10px;margin:25px 0 28px}.reference-copy .button{font-size:14px;min-height:50px;padding:13px 14px;gap:12px;flex:1}.reference-copy .stats>div{padding-inline:8px!important}.reference-copy .stats>div:first-child{padding-left:0!important}.reference-copy .stats strong{font-size:23px}.reference-copy .stats small{font-size:11px}.reference-stage{height:450px;margin-top:32px}.reference-backdrop{height:540px;object-position:72% center}.reference-card{width:155px;padding:12px 10px;gap:8px;border-radius:12px}.reference-icon{width:30px;height:30px}.reference-icon svg{width:20px;height:20px}.reference-card b{font-size:12px}.reference-card small{font-size:11px;margin-top:6px}.reference-chat{top:10px;left:2px;rotate:-3deg}.reference-web{top:40px;right:0;rotate:3deg}.reference-voice{top:184px;left:0;rotate:-3deg}.reference-growth{top:215px;right:0;rotate:3deg}.hero-scroll{font-size:12px}}
@media(max-width:360px){.reference-card{width:132px;gap:7px;padding:10px 8px}.reference-icon{width:24px;height:24px}.reference-icon svg{width:17px;height:17px}.reference-card b{font-size:11px}.reference-card small{font-size:10px}.reference-copy .button{font-size:13px;padding-inline:10px}.reference-copy .stats small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.reference-copy,.reference-card,.hero-scroll>span:before{animation:none!important}.reference-card{transition:none}}
@media(max-width:800px){.reference-backdrop{mask-image:linear-gradient(180deg,transparent,#000 16%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%)}}
/* Bring the hero content closer to the navigation. */
.reference-hero{margin-top:0}
.reference-backdrop{display:block}
@media(min-width:801px){.reference-hero,.reference-layout{min-height:700px}.reference-layout{padding-top:24px;padding-bottom:56px;align-items:start}}
@media(min-width:1550px){.reference-hero,.reference-layout{min-height:740px}}
@media(max-width:800px){.reference-layout{padding-top:24px}}

/* Compact desktop copy keeps both calls to action higher in the hero. */
@media(min-width:801px){
 .reference-copy h1{font-size:clamp(46px,4.6vw,76px);line-height:1.04;margin:18px 0 16px;letter-spacing:-3px}
 .reference-copy .company-tagline{font-size:clamp(17px,1.45vw,21px);line-height:1.4;margin:12px 0 16px}
 .reference-copy .heroText{font-size:clamp(16px,1.1vw,18px);line-height:1.6}
 .reference-copy .actions{margin:22px 0 28px}
}