/* Motion art direction: restrained lift across cards, selective color washes on featured surfaces. */
.motion-surface{isolation:isolate;--motion-color:#38bdf8;--motion-wash:color-mix(in srgb,var(--motion-color) 10%,transparent)}
.motion-surface[data-motion-tone="1"]{--motion-color:#a78bfa}
.motion-surface[data-motion-tone="2"]{--motion-color:#2dd4bf}
.motion-surface[data-motion-tone="3"]{--motion-color:#fb7185}
html.light .motion-surface{--motion-color:#0284c7}
html.light .motion-surface[data-motion-tone="1"]{--motion-color:#7c3aed}
html.light .motion-surface[data-motion-tone="2"]{--motion-color:#0d9488}
html.light .motion-surface[data-motion-tone="3"]{--motion-color:#e05d76}
.surface-ornament{position:absolute!important;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit;contain:paint}
.shape-motion>.surface-ornament::before{content:"";position:absolute;width:160px;height:160px;right:-88px;bottom:-88px;border-radius:50%;pointer-events:none;background:var(--motion-wash);border:1px solid color-mix(in srgb,var(--motion-color) 8%,transparent);transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.shape-motion:is(:hover,:focus-within)>.surface-ornament::before{transform:scale(1.75) translate(-9px,-9px)}
.surface-ornament::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--glint-x,82%) var(--glint-y,20%),color-mix(in srgb,var(--motion-color) 13%,transparent),transparent 70%);opacity:0;transition:opacity .45s ease}
.color-motion:is(:hover,:focus-within)>.surface-ornament::after{opacity:1}
.card.motion-surface,.flow-item.motion-surface,.hero-product-link.motion-surface{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease,box-shadow .35s ease}
.card.motion-surface:is(:hover,:focus-within),.flow-item.motion-surface:is(:hover,:focus-within){border-color:color-mix(in srgb,var(--text) 12%,var(--line));box-shadow:0 18px 42px #00000012}
.color-motion:is(:hover,:focus-within){border-color:color-mix(in srgb,var(--motion-color) 38%,var(--line))!important;box-shadow:0 22px 54px color-mix(in srgb,var(--motion-color) 10%,transparent)!important}
.audience-card::after{content:none}
.audience-card>.surface-ornament::before{width:170px;height:170px;right:-95px;bottom:-95px}
.audience-card:is(:hover,:focus-within)>.surface-ornament::before{transform:scale(1.8) translate(-8px,-8px)}
.audience-grid{background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 6%,transparent),color-mix(in srgb,var(--accent-2) 9%,transparent));padding:18px;gap:16px;box-shadow:0 24px 70px #00000005}
.capability-card>.surface-ornament::before{width:180px;height:180px;right:-90px;bottom:28px;background:transparent;border:1px solid color-mix(in srgb,var(--icon-color) 20%,transparent);box-shadow:0 0 0 18px color-mix(in srgb,var(--icon-color) 3%,transparent),0 0 0 38px color-mix(in srgb,var(--icon-color) 2%,transparent)}
.capability-card:is(:hover,:focus-within)>.surface-ornament::before{transform:translateX(-28px) rotate(30deg) scale(1.12)}
.trust-grid .surface-ornament::before{border-radius:24px;transform:rotate(35deg);background:linear-gradient(135deg,transparent,var(--motion-wash));width:170px;height:170px;right:-75px;bottom:-75px}
.trust-grid .card:is(:hover,:focus-within) .surface-ornament::before{transform:rotate(15deg) translate(-18px,-18px)}
.about-values .card>.surface-ornament::before{border-radius:0 70px 0 70px}
.hero-product-link>.surface-ornament::before{width:100px;height:100px;bottom:-65px;right:-45px}
.capability-card .icon-box,.card .decorative-icon,.contact-item .icon-box{transition:transform .35s ease,box-shadow .35s ease}
.capability-card:is(:hover,:focus-within) .icon-box,.card:is(:hover,:focus-within) .decorative-icon,.contact-item:is(:hover,:focus-within) .icon-box{transform:translateY(-4px) rotate(-5deg);box-shadow:0 10px 22px color-mix(in srgb,var(--motion-color) 14%,transparent)}
/* Products: soft reflected light; preserve the native screenshot proportions. */
.showcase:nth-child(2){--motion-color:#2dd4bf}
.showcase .browser,.screen-stage .browser{transition:transform .5s ease,box-shadow .5s ease;will-change:auto}
.showcase:is(:hover,:focus-within) .browser{transform:translateY(-5px);box-shadow:0 32px 65px #0003,0 0 50px color-mix(in srgb,var(--motion-color) 9%,transparent)}
.botlite-brand-visual{display:grid;place-items:center;min-height:370px;background:radial-gradient(ellipse at 50% 45%,#dceeff,#f8fafc 72%);position:relative;overflow:hidden}
.botlite-brand-visual::before{content:"";position:absolute;width:240px;height:240px;border:1px solid #0891b21a;border-radius:50%;box-shadow:0 0 0 32px #0891b205,0 0 0 64px #7c3aed04;animation:bot-orbit-breathe 7s ease-in-out infinite}
.showcase .botlite-brand-visual img,.screen-stage .botlite-brand-visual img{position:relative;z-index:1;width:min(310px,72%);height:auto;aspect-ratio:1;object-fit:contain;animation:bot-hover 7s ease-in-out infinite;filter:drop-shadow(0 18px 22px #155eef20)}
.module-card img{transition:transform .65s ease}.module-card:hover img{transform:scale(1.025)}
.instruction-list li,.spec-row,.trust-signal{transition:background .3s ease,border-color .3s ease,transform .3s ease}
.instruction-list li:hover,.spec-row:hover,.trust-signal:hover{background:color-mix(in srgb,var(--accent) 5%,var(--panel-solid));border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
/* CTA reflection runs only on interaction. */
.button::before{content:"";position:absolute;inset:-50%;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#ffffff13 48%,transparent 60%);transform:translateX(-75%);transition:transform .7s ease}
.button:is(:hover,:focus-visible)::before{transform:translateX(75%)}
.footer-cta{position:relative;isolation:isolate}
.footer-grid>div:not(.footer-intro)>a:not(.button){text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:color .25s ease,text-decoration-color .25s ease,transform .25s ease}.footer-grid>div:not(.footer-intro)>a:hover{text-decoration-color:currentColor}
/* Hero: three orbit paths, a breathing aurora and a horizon signal. */
.hero-atmosphere{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-1;contain:paint;background:transparent}
.product-hero{isolation:isolate}.hero-atmosphere .hero-orbit{position:absolute;display:block;left:50%;top:48%;width:1100px;height:540px;border:1px solid #38bdf81c;border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg);animation:hero-orbit-turn 55s linear infinite}
.hero-orbit::before{content:"";position:absolute;left:14%;top:14%;width:6px;height:6px;border-radius:50%;background:#7dd3fc;box-shadow:0 0 18px #38bdf880;opacity:.6}
.hero-atmosphere .orbit-two{width:850px;height:660px;border-color:#a78bfa15;animation-direction:reverse;animation-duration:65s;rotate:48deg}
.hero-atmosphere .orbit-three{width:1450px;height:760px;border-color:#38bdf80d;animation-duration:80s;rotate:-12deg}
.hero-aura{position:absolute;inset:-16% -10%;background:radial-gradient(ellipse at 28% 42%,#0891b216 0%,#0891b20a 34%,transparent 68%),radial-gradient(ellipse at 78% 32%,#7c3aed16 0%,#7c3aed09 36%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,#000 0 55%,transparent 88%);mask-image:radial-gradient(ellipse at center,#000 0 55%,transparent 88%);animation:hero-aura-drift 16s ease-in-out infinite alternate}
.hero-horizon{position:absolute;left:12%;right:12%;bottom:10%;height:1px;background:linear-gradient(90deg,transparent,#38bdf828,transparent)}
.hero-horizon::after{content:"";position:absolute;width:90px;height:1px;background:linear-gradient(90deg,transparent,#7dd3fc80,transparent);animation:hero-signal 12s ease-in-out infinite}
.hero-product-link:nth-child(2){--motion-color:#a78bfa}
.legacy-badge{animation:badge-arrive .8s ease both}.legacy-stat{transition:transform .3s ease}.legacy-stat:hover{transform:translateY(-4px)}
.signal-screen{position:relative}.signal-screen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#67e8f906 45%,transparent 65%);animation:signal-reflection 10s ease-in-out infinite}
html.light .hero-orbit{border-color:#0284c719}html.light .hero-orbit::before{background:#0369a1;box-shadow:none;opacity:.35}html.light .hero-aura{opacity:.65}
@keyframes hero-orbit-turn{from{transform:translate(-50%,-50%) rotate(-18deg)}to{transform:translate(-50%,-50%) rotate(342deg)}}
@keyframes hero-aura-drift{to{transform:translate(3%,-3%) scale(1.1);opacity:.65}}
@keyframes hero-signal{0%,15%{transform:translateX(0);opacity:0}30%{opacity:.8}85%,100%{transform:translateX(65vw);opacity:0}}
@keyframes bot-hover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes bot-orbit-breathe{50%{transform:scale(1.07);opacity:.6}}
@keyframes signal-reflection{0%,20%{transform:translateX(-80%);opacity:0}40%{opacity:1}80%,100%{transform:translateX(80%);opacity:0}}
@keyframes badge-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ambience-managed:not(.ambience-visible) .hero-orbit,.ambience-managed:not(.ambience-visible) .hero-aura,.ambience-managed:not(.ambience-visible) .hero-horizon::after,.ambience-managed:not(.ambience-visible) .botlite-brand-visual img,.ambience-managed:not(.ambience-visible) .botlite-brand-visual::before,.ambience-managed:not(.ambience-visible) .signal-screen::after{animation-play-state:paused}
@media(max-width:680px){.hero-atmosphere{opacity:.65}.hero-atmosphere .hero-orbit{width:700px;height:440px}.hero-atmosphere .orbit-two{width:480px;height:660px}.hero-atmosphere .orbit-three{display:none}.botlite-brand-visual{min-height:280px}.audience-grid{padding:12px}}
@media(hover:hover) and (pointer:fine){.card.motion-surface:is(:hover,:focus-within),.flow-item.motion-surface:is(:hover,:focus-within){translate:0 -3px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.motion-surface:is(:hover,:focus-within){translate:none!important}.hero-orbit{opacity:.45}}

/* Seam architecture: the full-width elements own all visual surfaces. */
.site-header.has-utility,
.site-header.has-utility.is-scrolled,
html.dark .site-header.has-utility:not(.is-scrolled),
html.light .site-header.has-utility:not(.is-scrolled){
  width:100%;
  background:#0a0f1e;
  background-image:linear-gradient(90deg,#0a0f1e,#0b1120 52%,#0a0f1e);
  border-bottom:1px solid rgba(148,163,184,.12);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.site-header.has-utility.is-scrolled,
html.dark .site-header.has-utility.is-scrolled{
  background:#0a0f1e;
  background-image:linear-gradient(90deg,#0a0f1e,#0b1120 52%,#0a0f1e);
  box-shadow:0 12px 34px rgba(0,0,0,.24);
}
.site-header.has-utility .nav-shell,
.site-header.has-utility .nav-links{
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.site-header.has-utility .utility-bar,
.site-header.has-utility.is-scrolled .utility-bar{background:rgba(20,32,51,.72)}
