/* Background: particle grid (canvas) under two slow glowing auras. */
.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 80%); mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 80%); }
.aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aura span { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: var(--aura); filter: blur(90px); animation: drift 28s ease-in-out infinite alternate; }
.aura span:first-child { top: -32vmax; left: -14vmax; background: radial-gradient(circle, rgb(var(--accent-rgb)), transparent 62%); }
.aura span:last-child { top: 6vmax; right: -30vmax; background: radial-gradient(circle, rgb(var(--accent-2-rgb)), transparent 62%); animation-delay: -14s; }
@keyframes drift { to { transform: translate3d(6vmax, 5vmax, 0) scale(1.08); } }

/* Light theme backdrop: an animated WebGL gradient, over a static CSS version used until it draws or without WebGL. */
.gradient { position: fixed; inset: 0; z-index: 0; display: none; pointer-events: none; background: radial-gradient(70% 60% at 12% 8%, var(--mist-1), transparent 72%), radial-gradient(60% 65% at 92% 35%, var(--mist-2), transparent 70%), var(--mist-3); }
:root[data-theme="light"] .gradient { display: block; }
:root[data-theme="light"] .aura { display: none; }
.gradient canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease); }
.gradient.is-ready canvas { opacity: 1; }
/* Fine grain keeps the large soft areas from banding. */
.gradient::after { content: ""; position: absolute; inset: 0; opacity: .03; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMCCgkGBAVJOAVJAAAASklEQVQ4y2NgGAWjYBSMglEwCgY/YGRgZBQUYmJiZGQEkYwMjIyMgoKCjIyMIJKBgRFIMjIyAklGRkYGRkFBYEcwMDIyMjAOUQAA1I4HwVwZAkYAAAAASUVORK5CYII=") 0 0 / 200px repeat; }

/* Hidden AI layer: neural nets, agents and agent code, invisible until the cursor moves.
   A soft mask reveals it under a frosted lens, a fainter trail lags behind, and it fades once the cursor rests. */
.ai-reveal { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease); --cx: -999px; --cy: -999px; --tx: -999px; --ty: -999px; }
.ai-reveal.is-active { opacity: 1; }
.ai-layer { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--ai-layer, .9);
  -webkit-mask-image: radial-gradient(circle 250px at var(--cx) var(--cy), #000 0%, #000 30%, rgb(0 0 0 / .45) 62%, transparent 100%), radial-gradient(circle 360px at var(--tx) var(--ty), rgb(0 0 0 / .35), transparent 100%);
  mask-image: radial-gradient(circle 250px at var(--cx) var(--cy), #000 0%, #000 30%, rgb(0 0 0 / .45) 62%, transparent 100%), radial-gradient(circle 360px at var(--tx) var(--ty), rgb(0 0 0 / .35), transparent 100%); }
.ai-lens { position: absolute; left: 0; top: 0; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; transform: translate3d(var(--cx), var(--cy), 0); border: 1px solid rgb(var(--accent-rgb) / .16); background: radial-gradient(circle, transparent 55%, rgb(var(--accent-rgb) / .06) 80%, rgb(var(--accent-2-rgb) / .1) 100%); box-shadow: inset 0 0 50px -10px rgb(var(--accent-rgb) / .25), 0 0 80px -30px rgb(var(--accent-2-rgb) / .45); -webkit-backdrop-filter: var(--lens-filter); backdrop-filter: var(--lens-filter); }
.ai-net path, .ai-bot path, .ai-bot rect, .ai-chip path, .ai-chip rect { fill: none; stroke: rgb(var(--accent-rgb) / .75); stroke-width: 1.4; stroke-linecap: round; }
.ai-net circle, .ai-bot circle { fill: var(--bg); stroke: rgb(var(--accent-rgb) / .95); stroke-width: 1.6; }
.ai-net .ai-hot, .ai-bot .ai-hot { fill: rgb(var(--accent-2-rgb)); stroke: none; }
/* Outlined lettering: a transparent fill with a faint wash, so the dots show through the letters. */
.ai-big { fill: rgb(var(--accent-2-rgb) / .08); stroke: rgb(var(--accent-2-rgb) / .85); stroke-width: 1.5; font: 800 104px/1 var(--font-display); letter-spacing: -.04em; }
.ai-big-alt { fill: rgb(var(--accent-rgb) / .06); stroke: rgb(var(--accent-rgb) / .8); font-size: 60px; }
.ai-code text { fill: rgb(var(--accent-rgb)); font: 500 14px var(--font-mono); letter-spacing: .02em; }


:root{--accent-rgb:234 88 12;--accent-2-rgb:144 0 255;--dot-rgb:71 85 105;--aura:.12;--ai-layer:.75;--lens-filter:saturate(1.2);--mist-1:#fff0e7;--mist-2:#eee5ff;--mist-3:#f8f9fa;--bg:var(--background);--font-display:var(--font-sans);--ease:cubic-bezier(.16,1,.3,1)}
:root[data-theme=dark]{--dot-rgb:128 133 166;--aura:.24;--ai-layer:.9}
.gesture-orbit{display:none!important}
main,.site-footer,.product-showcase-row,.principles{position:relative;z-index:1}
.motion-stopped .aura span,.paused .aura span{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.field,.ai-reveal,.aura{display:none!important}.gradient canvas{display:none}.gradient{display:block}}

/* Touch devices use finger position; avoid expensive backdrop filtering on phones. */
@media(pointer:coarse){.ai-lens{width:200px;height:200px;margin:-100px 0 0 -100px;backdrop-filter:none;-webkit-backdrop-filter:none}.aura span{filter:blur(55px)}}