:root{--hailuo-blue:#086de8;--hailuo-ink:#222;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:#fff;color:var(--hailuo-ink);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,a,summary{-webkit-tap-highlight-color:transparent}
button,a,summary:focus{outline-offset:5px}
:focus-visible{outline:2px solid var(--hailuo-blue);outline-offset:5px}
.site-header{height:64px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:0 24px;position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);z-index:100;border-bottom:1px solid transparent;transition:box-shadow .25s,border-color .25s}
.site-header.scrolled{border-color:#ededed;box-shadow:0 4px 24px #00000004}
.brand{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;color:#202020;font-size:31px;font-weight:750;letter-spacing:-1.4px;line-height:1}
.brand img{width:34px;height:34px;object-fit:contain;transition:transform .35s}
.brand:hover img{transform:rotate(-12deg)}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:30px;margin-left:auto;margin-right:auto;font-size:16px;color:#737373;white-space:nowrap}
.desktop-nav>a,.nav-dropdown>summary{transition:color .2s;cursor:pointer}
.desktop-nav>a:hover,.nav-dropdown>summary:hover{color:#086de8}
.nav-dropdown{position:relative}
.nav-dropdown>summary{list-style:none;display:flex;align-items:center;gap:9px}
.nav-dropdown>summary::-webkit-details-marker{display:none}
.nav-dropdown>summary>span{display:inline-block;transition:transform .2s;font-size:17px}
.nav-dropdown[open]>summary>span{transform:rotate(180deg)}
.nav-panel{position:absolute;left:-20px;top:37px;min-width:230px;display:grid;gap:3px;padding:12px;border:1px solid #ececec;border-radius:15px;background:white;box-shadow:0 12px 40px #00000012;animation:panel-in .2s ease-out}
.nav-panel a{padding:11px 12px;border-radius:8px;color:#333;font-size:14px}
.nav-panel a:hover{background:#f3f7ff;color:#086de8}
.header-actions{display:flex;align-items:center;gap:8px}
.login-button,.signup-button{padding:10px 17px;border-radius:25px;font-size:15px;font-weight:500;white-space:nowrap;transition:transform .2s,background .2s}
.login-button{border:1px solid #d4d4d4;color:#111}
.signup-button{background:#086de8;color:white;border:1px solid #086de8}
.login-button:hover,.signup-button:hover{transform:translateY(-2px)}
.signup-button:hover{background:#075cc5}
.mobile-menu-button{display:none;background:transparent;border:0;width:36px;height:38px;padding:9px;cursor:pointer}
.mobile-menu-button span{height:2px;display:block;background:#222;margin:5px 0;transition:transform .2s}
.mobile-menu-button[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.mobile-menu-button[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-navigation{position:fixed;top:64px;left:0;right:0;z-index:99;background:#fff;padding:20px 24px;border-bottom:1px solid #eee;box-shadow:0 12px 24px #0000000a}
.mobile-navigation:not([hidden]){display:grid;gap:20px}
.hero-actions{display:flex;justify-content:center;padding:2px 0 8px}
.hero-cta{display:inline-flex;align-items:center;gap:25px;background:#086de8;color:#fff;border-radius:12px;padding:17px 27px;font-size:20px;font-weight:600;box-shadow:0 5px 20px #086de81a;transition:transform .25s,box-shadow .25s,background .25s}
.hero-cta span{font-size:25px;line-height:1;transition:transform .25s}
.hero-cta:hover{background:#005ed1;transform:translateY(-3px);box-shadow:0 12px 32px #086de833}
.hero-cta:hover span{transform:translate(3px,-3px)}
#hero-fold h1{animation:hero-enter .85s cubic-bezier(.16,1,.3,1) both}
#hero-fold p{animation:hero-enter .85s .08s cubic-bezier(.16,1,.3,1) both}
.hero-actions{animation:hero-enter .85s .16s cubic-bezier(.16,1,.3,1) both}
#hero-fold .absolute.blur-\[100px\]{pointer-events:none}
.gallery-brand-mark{width:75%!important;height:75%!important;object-fit:contain;filter:brightness(0) invert(1);margin:12.5%}
.video-brand{position:absolute;z-index:25;top:12px;right:12px;display:flex;align-items:center;gap:4px;color:white;font-size:12px;font-weight:600;text-shadow:0 1px 8px #0009;opacity:.8;pointer-events:none}
.video-brand img{height:16px!important;width:16px!important;filter:brightness(0) invert(1)}
.video-play{position:absolute;z-index:26;inset:50% auto auto 50%;transform:translate(-50%,-40%) scale(.85);display:grid;place-items:center;width:56px;height:56px;padding-left:3px;border:1px solid #ffffff60;border-radius:50%;background:#ffffff29;backdrop-filter:blur(10px);color:#fff;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
[data-preview]:hover .video-play,[data-preview]:focus-visible .video-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
[data-preview]{isolation:isolate}
.scroll-progress{position:fixed;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,#086de8,#8723e1);transform:scaleX(0);transform-origin:left;z-index:150;pointer-events:none}
.reveal{transition:opacity .7s ease,translate .7s cubic-bezier(.16,1,.3,1)}
.motion-ready .reveal:not(.is-visible){opacity:0;translate:0 22px}
#use-cases .grid>div,#features .grid>div{transition:transform .3s,box-shadow .3s}
#use-cases .grid>div:hover,#features .grid>div:hover{transform:translateY(-5px);box-shadow:0 12px 32px #8723e10a}
.faq-answer{padding:0 7% 28px;color:#606060;font-size:18px;line-height:1.7;white-space:pre-line}
[data-slot=accordion-content][data-state=open]{animation:answer-in .25s ease-out}
[data-slot=accordion-content][hidden]{display:none}
.video-dialog{width:min(1050px,92vw);max-width:none;padding:22px;border:1px solid #ffffff24;border-radius:22px;background:#121212;color:white;overflow:visible;box-shadow:0 25px 120px #0007}
.video-dialog::backdrop{background:#000c;backdrop-filter:blur(10px)}
.video-dialog[open]{animation:panel-in .25s ease-out}
.video-dialog video{display:block;max-height:72vh;width:100%;border-radius:12px;background:black;object-fit:contain}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 38px 18px 0}
.dialog-heading .brand{font-size:22px;color:#fff}
.dialog-heading .brand img{width:25px;height:25px}
.dialog-heading h2{font-size:15px;font-weight:500;opacity:.7;text-align:right}
.dialog-close{position:absolute;right:16px;top:17px;color:#fff;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffffff19;cursor:pointer}
.dialog-close:hover{background:#ffffff30}
body:has(.video-dialog[open]){overflow:hidden}
.skip-link{position:fixed;left:14px;top:-80px;z-index:200;background:#fff;border:2px solid #086de8;border-radius:8px;padding:10px 16px}
.skip-link:focus{top:12px}
#discover-more{padding-bottom:76px}
.pricing-glass-band{margin-bottom:100px}
.pricing-glass-card-title{display:flex;align-items:center;gap:6px}
.plan-brand-icon{width:20px;height:20px;object-fit:contain}
.pricing-glass-cards{align-items:stretch}
.pricing-glass-price-current{white-space:nowrap}
.pricing-glass-stepper-value{min-width:64px;text-align:center}
.pricing-glass-feature-box-rows{list-style:none}
.pricing-glass-tab:focus-visible,.pricing-glass-billing:focus-visible{outline-color:white}
.guest-details{font-size:12px;line-height:1.5;padding:12px;margin-top:8px;border:1px solid #ffffff30;border-radius:8px;background:#262626;color:#ddd}
.pricing-glass [hidden]{display:none!important}
.price-info-note{margin-top:26px;color:#999;text-align:center;font-size:12px}
.blog-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.blog-track::-webkit-scrollbar{display:none}
.blog-track>[data-slot=carousel-item]{scroll-snap-align:start}
@keyframes hero-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes panel-in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes answer-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.site-header{padding-left:40px;padding-right:40px}.desktop-nav{gap:38px}}
@media(max-width:1150px){.desktop-nav{gap:18px;font-size:14px}.brand{font-size:27px}.site-header{gap:14px;padding:0 20px}.login-button,.signup-button{padding:9px 14px;font-size:14px}}
@media(max-width:1000px){.desktop-nav{display:none}.header-actions{margin-left:auto}.mobile-menu-button{display:block}}
@media(max-width:767px){.site-header{padding:0 16px;height:64px}.brand{font-size:27px}.brand img{width:31px;height:31px}.login-button{display:none}.header-actions{gap:7px}.hero-actions{padding:5px 0 30px}.hero-cta{font-size:17px;padding:15px 23px;border-radius:10px}#hero-fold h1{margin-left:0;margin-right:0;font-size:clamp(42px,10vw,64px)}#hero-fold>div>div:first-child{padding-top:15px}#hero-fold p{padding:0}#hero-fold>div>div:nth-child(2){margin-top:8px}#video-wall h2{padding:0 18px;font-size:42px;line-height:1.03}.video-dialog{padding:13px;width:94vw;border-radius:15px}.dialog-heading{padding:0 34px 14px 0}.dialog-heading h2{font-size:11px}.dialog-heading .brand{font-size:18px}.dialog-heading .brand img{width:22px;height:22px}.dialog-close{top:11px;right:10px}.video-dialog video{max-height:75vh}.faq-answer{padding:0 0 24px;font-size:16px}.pricing-glass-band{margin-bottom:64px}#discover-more{padding-bottom:44px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.motion-ready .reveal:not(.is-visible){opacity:1;translate:none}.animate-marquee,.animate-marquee-reverse{animation:none!important}}