header{transition:box-shadow .28s ease,background-color .28s ease,border-color .28s ease}
header.is-scrolled{background:rgba(255,255,255,.97);box-shadow:0 12px 34px rgba(31,72,130,.10);border-color:#cfe2f8}
.brandmark{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.brand:hover .brandmark{transform:translateY(-2px) rotate(-2deg);border-color:#68afff;box-shadow:inset 0 0 0 1px #e4f0ff,0 12px 28px rgba(22,119,255,.15)}
.links a{position:relative;transition:color .22s ease}
.links a:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--blue2),var(--blue));transform:scaleX(0);transition:transform .22s ease}
.links a:hover{color:var(--blue)}
.links a:hover:after{transform:scaleX(1)}
.cta{position:relative;overflow:hidden;isolation:isolate;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.cta:before{content:"";position:absolute;top:-40%;bottom:-40%;left:-38%;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);transform:skewX(-18deg) translateX(-220%);transition:transform .58s ease;pointer-events:none;z-index:-1}
.cta:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(22,119,255,.26)}
.cta:hover:before{transform:skewX(-18deg) translateX(620%)}
.secondary:hover{border-color:#7bb8ff;box-shadow:0 14px 30px rgba(31,72,130,.11)}
.robot:before{animation:voidHalo 3.6s ease-in-out infinite}
.robot:after{animation:voidRobotShadow 3.2s ease-in-out infinite}
.robot img{animation:voidRobotFloat 3.2s ease-in-out infinite}
.lovable-brand-inline img{animation:lovableHeartBreath 3.6s ease-in-out infinite}
@keyframes voidRobotFloat{0%,100%{transform:translate3d(0,0,0) rotate(-.25deg)}50%{transform:translate3d(0,-16px,0) rotate(.45deg)}}
@keyframes voidRobotShadow{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:.28;transform:translateX(-50%) scale(.78)}}
@keyframes voidHalo{0%,100%{transform:scale(.94);opacity:.58}50%{transform:scale(1.06);opacity:.92}}
@keyframes lovableHeartBreath{0%,100%{transform:translateY(.02em) scale(1)}50%{transform:translateY(-.02em) scale(1.06)}}
.plan,.benefit,.step,.trust article,details,.finalbox{transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease,background-color .26s ease}
.plan:hover,.benefit:hover,.step:hover,details:hover{transform:translateY(-5px);border-color:#9bcaff;box-shadow:0 22px 48px rgba(31,72,130,.14)}
.trust article:hover{background:#f7fbff}
.plan.featured{animation:voidFeaturedGlow 3.8s ease-in-out infinite}
@keyframes voidFeaturedGlow{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 18px 44px rgba(22,119,255,.18)}}
.badge{animation:voidBadgePulse 3.2s ease-in-out infinite}
@keyframes voidBadgePulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.035)}}
.num{transition:transform .24s ease,box-shadow .24s ease}
.step:hover .num{transform:scale(1.06) rotate(-2deg);box-shadow:0 12px 25px rgba(22,119,255,.24)}
.price{transition:transform .22s ease,color .22s ease}
.plan:hover .price{transform:translateY(-2px);color:var(--blue)}
details[open]{border-color:#b7d8ff;background:#fbfdff}
details[open] summary{color:var(--blue)}
[data-animate]{opacity:0;transform:translateY(24px);transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delay,0ms)}
[data-animate].is-visible{opacity:1;transform:translateY(0)}
[data-animate="fade-left"]{transform:translateX(-28px)}
[data-animate="fade-right"]{transform:translateX(28px)}
[data-animate="fade-left"].is-visible,[data-animate="fade-right"].is-visible{transform:translateX(0)}
.mobile-nav{transform:translateY(-8px) scale(.985);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.mobile-nav.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.menu span{transition:transform .22s ease,opacity .18s ease}
.menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hero{background-size:120% 120%,100% 100%;animation:voidHeroBreath 10s ease-in-out infinite alternate}
@keyframes voidHeroBreath{from{background-position:70% 28%,0 0}to{background-position:78% 35%,0 0}}
@media(prefers-reduced-motion:reduce){
  [data-animate]{opacity:1!important;transform:none!important;transition:none!important}
  .plan.featured,.badge,.hero{animation:none!important}
  .robot img{animation:voidRobotFloat 5s ease-in-out infinite!important}
  .robot:before{animation:voidHalo 5.6s ease-in-out infinite!important}
  .robot:after{animation:voidRobotShadow 5s ease-in-out infinite!important}
  .lovable-brand-inline img{animation:none!important}
}