:root{--motion-ease:cubic-bezier(.22,1,.36,1)}

/* A short crossfade keeps ordinary server-rendered links and browser history. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:landing-page-out .18s ease both}
::view-transition-new(root){animation:landing-page-in .32s var(--motion-ease) both}
@keyframes landing-page-out{to{opacity:0}}
@keyframes landing-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.topbar{box-shadow:0 8px 32px #10182d06}
.nav-links a,.footer-links a{position:relative}
.nav-links a::after,.footer-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--landing-primary),var(--landing-violet));transform:scaleX(0);transform-origin:left;transition:transform .3s var(--motion-ease)}
.nav-links a:is(:hover,:focus-visible)::after,.footer-links a:is(:hover,:focus-visible)::after{transform:scaleX(1)}
.service-switch a{transition:background .25s,border-color .25s,box-shadow .3s,transform .3s var(--motion-ease)}
.service-switch a[aria-current]{box-shadow:0 4px 16px #218cce0d}
.service-switch a:active{transform:scale(.985)}
.nav .language-menu-toggle{transition:box-shadow .25s,border-color .25s}
.nav .language-menu-toggle:hover{border-color:#80b7e0;box-shadow:0 4px 14px #218cce18}
.language-menu-list:not([hidden]){animation:landing-menu-in .2s var(--motion-ease)}
@keyframes landing-menu-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.hero-glow-one{animation:landing-glow-one 4s var(--motion-ease) both}
.hero-glow-two{animation:landing-glow-two 4s var(--motion-ease) both}
@keyframes landing-glow-one{from{opacity:.25;transform:translate(-45px,30px) scale(.85)}to{opacity:1;transform:none}}
@keyframes landing-glow-two{from{opacity:.2;transform:translate(50px,-30px) scale(.8)}to{opacity:1;transform:none}}
.hero h1 span,.service-selection h1 span{background:linear-gradient(115deg,#b6eaff 5%,#7bcfff 48%,#b4a6ff 95%);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-copy .eyebrow,.service-selection .eyebrow{box-shadow:inset 0 1px 0 #ffffff0d}

.service-card,.case,.pricing-card{position:relative;isolation:isolate;transition:transform .45s var(--motion-ease),border-color .35s,box-shadow .45s var(--motion-ease),background .35s}
.service-card{background:linear-gradient(145deg,#ffffff0e,#ffffff03);box-shadow:inset 0 1px 0 #ffffff0c}
.case{background:linear-gradient(155deg,#fff,#f8faff)}
.case-icon{transition:transform .5s var(--motion-ease),box-shadow .4s}
.phone-frame{transition:transform .65s var(--motion-ease),border-color .4s,box-shadow .5s;box-shadow:0 28px 60px #0005,0 0 0 1px #ffffff0b}
.btn,.nav-cta{position:relative;isolation:isolate;overflow:hidden;transition:transform .35s var(--motion-ease),box-shadow .35s,border-color .35s}
.btn-primary::before,.nav-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,#ffffff00,#ffffff26,#ffffff00);transform:translateX(-110%);transition:transform .7s var(--motion-ease);pointer-events:none}
.btn-primary:is(:hover,:focus-visible)::before,.nav-cta:is(:hover,:focus-visible)::before{transform:translateX(110%)}
.btn:active,.nav-cta:active{transform:translateY(0) scale(.98)}
.case-link span,.demo-launch span,.service-card-link span,.hero-actions .btn span{transition:transform .35s var(--motion-ease)}
a:is(:hover,:focus-visible)>.case-icon{transform:rotate(-6deg)}
.case-link:is(:hover,:focus-visible) span,.demo-launch:is(:hover,:focus-visible) span,.service-card:is(:hover,:focus-visible) .service-card-link span,.hero-actions .btn:is(:hover,:focus-visible) span{transform:translateX(4px)}
.faq summary{transition:color .25s}
.faq summary:hover{color:#167bad}
.faq summary span{transition:transform .35s var(--motion-ease)}
.faq details[open] p{animation:landing-answer-in .3s ease both}
@keyframes landing-answer-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@supports (interpolate-size:allow-keywords){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--motion-ease),content-visibility .35s;transition-behavior:allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}
@media(hover:hover) and (pointer:fine){
  .service-card:hover{transform:translateY(-7px);box-shadow:0 24px 55px #0003,inset 0 1px 0 #ffffff20}
  .case:hover{transform:translateY(-6px);border-color:#9fcceb;box-shadow:0 24px 50px #1c2d5b12}
  .service-card:hover .case-icon,.case:hover .case-icon{transform:translateY(-2px) rotate(-7deg);box-shadow:0 8px 18px #10182d12}
  .pricing-card:hover{transform:translateY(-5px);border-color:#a1daff;box-shadow:0 24px 70px #0003}
  .phone-frame:hover{transform:translateY(-8px) rotate(-1deg);border-color:#436085;box-shadow:0 35px 65px #0006}
  .mobile-screen-team .phone-frame:hover{transform:translateY(-8px) rotate(1deg)}
}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .service-card:hover,.case:hover,.pricing-card:hover,.phone-frame:hover,.mobile-screen-team .phone-frame:hover,.btn:hover,.nav-cta:hover{transform:none}
}