in index.html
2) Paste the orb's COMPILED (plain) CSS at the very END of this file
— skip its `body{}` and `*{}` rules so it doesn't override the site
3) Resize with --orb-size below */
.aios-stage{--orb-scale:1.38}
.aios-orb-host{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; filter:drop-shadow(0 0 60px rgba(120,140,240,.42))}
.aios-orb-host > .ai{transform:scale(var(--orb-scale))} /* keep the orb's vmin proportions, just scale it to fit the hero */
/* insight cards */
.aios-card{position:absolute; background:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.85); border-radius:14px; box-shadow:0 20px 44px -20px rgba(20,40,90,.45); padding:11px 14px; font-size:12.5px; line-height:1.35; color:#16203a; font-weight:600; white-space:nowrap; opacity:0; will-change:transform,opacity; animation:cardCycle 15s ease-in-out infinite}
.card-chat .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#2183e9; margin-right:8px; vertical-align:0}
.card-chat .dot.live{animation:dotLive 1.6s ease-out infinite}
.card-chat .dot.warn{background:#e8830c}
.card-chart{display:flex; align-items:center; gap:11px}
.cc-meta{display:flex; flex-direction:column; gap:1px}
.cc-meta b{font-size:12.5px; color:#16203a} .cc-meta span{font-size:11px; color:#6b7488; font-weight:600}
.card-user,.card-agent{display:flex; align-items:center; gap:10px}
.card-user .cu-av{width:30px; height:30px; border-radius:50%; object-fit:cover; flex:0 0 auto}
.cu-txt{display:flex; flex-direction:column; gap:1px}
.cu-txt b{font-size:12.5px; color:#16203a} .cu-txt span{font-size:11px; color:#6b7488; font-weight:600}
.cu-pill{font-size:11px; font-weight:800; color:#fff; background:#2183e9; padding:5px 11px; border-radius:20px; margin-left:2px}
.card-agent .ag-ic{width:26px; height:26px; border-radius:8px; background:#eafaf1; color:#0c8a4d; display:grid; place-items:center; font-weight:800; font-size:13px; flex:0 0 auto}
.donut-val{animation:donutDraw 15s ease-out infinite}
.line-val{stroke-dasharray:210; animation:lineDraw 15s ease-out infinite}
/* positions + stagger (6 cards) */
/* 4-quadrant layout: cards hug the orb; only cross-quadrant cards are ever co-visible (round-robin) so no collisions */
.k1{top:36%; left:8%} .k2{top:9.1%; left:35.6%} .k3{top:53.8%; left:61.4%} .k4{top:78.7%; left:17.9%}
.k5{top:28.3%; left:10%} .k6{top:24.1%; left:57.4%} .k7{top:65.1%; left:58.6%} .k8{top:74.6%; left:13.1%}
.k9{top:22.8%; left:23.6%} .k10{top:36%; left:59.5%} .k11{top:60.9%; left:43%} .k12{top:54.7%; left:10.3%}
/* round-robin through the 4 quadrants (Q1 TL -> Q3 TR -> Q4 BR -> Q2 BL) -> the ~3 on screen are always different quadrants */
.k1{animation-delay:0s} .k2{animation-delay:1.25s} .k3{animation-delay:2.5s} .k4{animation-delay:3.75s} .k5{animation-delay:5s} .k6{animation-delay:6.25s}
.k7{animation-delay:7.5s} .k8{animation-delay:8.75s} .k9{animation-delay:10s} .k10{animation-delay:11.25s} .k11{animation-delay:12.5s} .k12{animation-delay:13.75s}
.k3 .donut-val{animation-delay:2.5s} .k4 .line-val{animation-delay:3.75s}
@keyframes cardCycle{0%{opacity:0; transform:translateY(14px) scale(.95)} 3%{opacity:1; transform:translateY(0) scale(1)} 22%{opacity:1; transform:translateY(0) scale(1)} 25%{opacity:0; transform:translateY(-10px) scale(.98)} 100%{opacity:0; transform:translateY(-10px) scale(.98)}}
@keyframes donutDraw{0%{stroke-dashoffset:97.4} 12%,100%{stroke-dashoffset:22}}
@keyframes lineDraw{0%{stroke-dashoffset:210} 14%,100%{stroke-dashoffset:0}}
@keyframes dotLive{0%{box-shadow:0 0 0 0 rgba(33,131,233,.5)} 70%,100%{box-shadow:0 0 0 7px rgba(33,131,233,0)}}
@media(max-width:980px){ .aios-stage{display:none} }
@media(prefers-reduced-motion:reduce){ .aios-orb,.orb-glass,.orb-glass .blob,.orb-rings::before,.orb-rings::after{animation:none} .aios-card{animation:none; opacity:1} .donut-val,.line-val{animation:none} }
@property --a {
syntax: "
";
inherits: true;
initial-value: 0deg;
}
@property --l {
syntax: "";
inherits: true;
initial-value: 0;
}
@property --x {
syntax: "";
inherits: false;
initial-value: 0;
}
@property --y {
syntax: "";
inherits: false;
initial-value: 0;
}
@property --o {
syntax: "";
inherits: false;
initial-value: 0;
}
@property --value {
syntax: "";
inherits: true;
initial-value: 0deg;
}
@property --width-ratio {
syntax: "";
inherits: true;
initial-value: 0;
}
@property --scale {
syntax: "";
inherits: true;
initial-value: 0;
}
:root {
--count: 4;
--radius: 6vmin;
--width: 1vmin;
/* speed controls */
--blob-speed: 7.5s;
--ring-speed: 12s;
/* palette */
--bg-core: #8b86ff;
--shell-bg: #b8b7ff;
--blob-1a: #7f5cff;
--blob-1b: #6ee7f9;
--blob-2a: #ff7aa2;
--blob-2b: #ffd6e6;
--blob-3a: #d98cff;
--blob-4a: #5f63ff;
--ring-1: #ffffff;
--ring-2: #7dd3fc;
--ring-3: #818cf8;
--ring-4: #e879f9;
--ring-5: #fef08a;
}
.ai {
--s: 40vmin;
--p: calc(var(--s) / 4);
width: var(--s);
aspect-ratio: 1;
--bg-color: color-mix(in srgb, var(--bg-core), transparent 90%);
background:
radial-gradient(60% 75% at center, var(--bg-color) 50%, transparent 50%),
radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%);
padding: var(--p);
display: grid;
place-items: center;
position: relative;
border-radius: 50%;
transform: scale(1.4);
}
@keyframes ai {
from {
--a: 360deg;
--l: 0.35;
--o: 1;
}
30% {
--l: 1.2;
}
70% {
--o: 0.5;
--l: 0.15;
}
98% {
--o: 0.75;
}
to {
--a: 0deg;
--l: 0.35;
--o: 1;
}
}
.ai .c {
position: absolute;
width: 10vmin;
aspect-ratio: 1;
border-radius: 50%;
--offset-per-item: calc(360deg / var(--count));
--current-angle-offset: calc(var(--offset-per-item) * var(--i) + var(--a));
translate: calc(cos(var(--current-angle-offset)) * var(--radius) + var(--x, 0))
calc(sin(var(--current-angle-offset)) * var(--radius) * -1);
scale: calc(0.6 + var(--l));
animation: ai var(--blob-speed) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
transition: opacity 0.5s linear;
opacity: var(--o, 1);
}
.ai .c:nth-child(1) { --i: 0; }
.ai .c:nth-child(2) { --i: 1; }
.ai .c:nth-child(3) { --i: 2; }
.ai .c:nth-child(4) { --i: 3; }
.ai .c1 {
background: radial-gradient(50% 50% at center, var(--blob-1a), var(--blob-1b));
--x: 1vmin;
width: 16vmin;
animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
}
.ai .c2 {
background: radial-gradient(50% 50% at center, var(--blob-2a), var(--blob-2b));
width: 15vmin;
}
.ai .c3 {
background: radial-gradient(50% 50% at center, var(--blob-3a), transparent);
width: 5vmin;
opacity: 0.6;
--x: -1vmin;
}
.ai .c4 {
background: radial-gradient(50% 50% at center, var(--blob-4a), #c7d2fe);
animation-timing-function: cubic-bezier(0.3, 0.05, 0.7, 0.45);
}
.ai .container {
overflow: hidden;
background: var(--shell-bg);
width: 100%;
border-radius: 50%;
aspect-ratio: 1;
position: relative;
display: grid;
place-items: center;
}
.ai .glass {
overflow: hidden;
position: absolute;
--w: 0.5vmin;
inset: calc(var(--p) - var(--w));
border-radius: 50%;
backdrop-filter: blur(1.3vmin);
box-shadow: 0 0 8vmin color-mix(in srgb, black, transparent 70%);
background: radial-gradient(
10vmin at 70% 30%,
rgba(255, 255, 255, 0.7),
transparent
);
}
.ai .glass::after {
content: "";
position: absolute;
inset: 0;
--c: rgba(255, 255, 255, 0.03);
--w: 0.0625rem;
--g: 0.1875rem;
background: repeating-linear-gradient(
var(--c),
var(--c),
var(--w),
transparent var(--w),
transparent calc(var(--w) + var(--g))
);
border-radius: inherit;
border: 1vmin rgba(255, 255, 255, 0.1) solid;
}
.ai .rings {
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
inset: 0;
perspective: 11rem;
opacity: 0.9;
}
.ai .rings::before,
.ai .rings::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
--width-ratio: 1;
border: calc(var(--width) * var(--width-ratio)) solid transparent;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
background: linear-gradient(
var(--ring-1),
var(--ring-2),
var(--ring-3),
var(--ring-4),
var(--ring-5)
) border-box;
mask-composite: exclude;
animation: ring var(--ring-speed) ease-in-out infinite;
--start: 180deg;
--value: var(--start);
--scale: 1;
transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value)) scale(var(--scale));
}
.ai .rings::before {
--start: 180deg;
}
.ai .rings::after {
--start: 90deg;
}
@keyframes ring {
from {
--value: var(--start);
--scale: 1;
}
50% {
--scale: 1.15;
--width-ratio: 1.35;
}
70% {
--scale: 1;
--value: calc(var(--start) + 180deg);
--width-ratio: 1;
}
80% {
--scale: 1.15;
--width-ratio: 1.35;
}
to {
--value: calc(var(--start) + 360deg);
--scale: 1;
--width-ratio: 1;
}
}
/* ESG page — mobile: stack each section as title -> image -> content (desktop unchanged) */
@media(max-width:860px){
.prod--stack{display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:10px}
.prod--stack .prod-copy{display:contents}
.prod--stack .eyebrow{order:1}
.prod--stack h2{order:2; margin-bottom:2px}
.prod--stack .prod-media{order:3; flex:none; width:100%; margin:8px 0}
.prod--stack .lead{order:4}
.prod--stack .btn{order:5; align-self:flex-start; margin-top:4px}
}
/* ===== Lingee demo iframe — scaled desktop dashboard, auto-playing ===== */
.demo-frame{position:relative; width:100%; max-width:1180px; margin:38px auto 0; aspect-ratio:1180/660; overflow:hidden; border-radius:20px; box-shadow:var(--shadow); background:#eef2f9; scroll-margin-top:96px}
.lingee-frame{position:absolute; top:0; left:0; width:1180px; height:660px; border:0; transform-origin:top left; display:block}
.demo-cta{display:none}
@media(max-width:820px){
.lingee-frame{pointer-events:none}
/* button sits BELOW the frame (no longer overlays the auto-play), outlined "See it in action" style */
.demo-cta{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:14px auto 0; background:#fff; border:1px solid #dfe5ee; color:#16203a; text-decoration:none; border-radius:14px; padding:16px 20px; font-size:16px; font-weight:700; box-shadow:0 1px 2px rgba(20,30,60,.04)}
.demo-cta:active{transform:scale(.99)}
}
/* ===== homepage assistant — auto-playing smart-search demo ===== */
.as-box{cursor:default}
.as-field{flex:1; min-width:0; overflow:hidden; white-space:nowrap; height:44px; line-height:44px; font-size:14.5px; color:var(--l-ink); text-align:left}
.as-text{white-space:nowrap}
.as-caret{display:none; width:2px; height:18px; background:var(--blue); margin-left:1px; border-radius:1px; vertical-align:-3px}
.as-box.caret .as-caret{display:inline-block; animation:asCaret 1s step-end infinite}
@keyframes asCaret{0%,50%{opacity:1} 51%,100%{opacity:0}}
.as-send.press{transform:scale(.94); filter:brightness(.96)}
.as-chip{user-select:none}
.as-chip.sel{border-color:#9b8cff; color:#5b6dff; background:#f1efff; box-shadow:0 6px 16px -8px rgba(123,108,255,.55)}
.as-out{min-height:104px; max-width:700px; margin:0 auto; position:relative}
.as-think{display:none; align-items:center; gap:9px; justify-content:flex-start; max-width:700px; margin:18px auto 0; text-align:left; color:#6b7488; font-size:13.5px}
.as-think.show{display:flex; animation:fadeUp .3s var(--ease)}
.as-think .as-ico2{color:#9b8cff}
.as-think.show .as-think-txt{background:linear-gradient(90deg,#9aa3b5 25%,#cdd3de 50%,#9aa3b5 75%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:asShimmer 1.2s linear infinite}
@keyframes asShimmer{to{background-position:-200% 0}}
.as-dots{display:inline-flex; gap:4px}
.as-dots i{width:5px; height:5px; border-radius:50%; background:#b7bdca; display:block; animation:asDot 1s ease-in-out infinite}
.as-dots i:nth-child(2){animation-delay:.18s} .as-dots i:nth-child(3){animation-delay:.36s}
@keyframes asDot{0%,100%{opacity:.3; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)}}
.as-ans-txt{margin:0}
.as-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:11px}
.as-tag{font-size:12px; font-weight:700; color:#3b6fd6; background:#e7f0ff; border:1px solid rgba(35,134,238,.25); padding:5px 11px; border-radius:999px; opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease)}
.as-tag.in{opacity:1; transform:none}
.as-tag.metric{color:#0c8a4d; background:#eafaf1; border-color:rgba(12,138,77,.25)}
@media(prefers-reduced-motion:reduce){ .as-box.caret .as-caret,.as-dots i,.as-think.show .as-think-txt{animation:none} }
/* ===== pause heavy animations when their section is scrolled off-screen (CPU/battery) ===== */
.apaused, .apaused *{animation-play-state:paused !important}
.apaused .rings::before, .apaused .rings::after{animation-play-state:paused !important}
/* pause the orb while a modal is open OR the tab is hidden — orb is covered/not visible then, so zero visual change, and it stops the form's backdrop-blur from re-rendering an animating orb every frame */
body.modal-open .aios-stage, body.modal-open .aios-stage *,
body.tab-hidden .aios-stage, body.tab-hidden .aios-stage *{animation-play-state:paused !important}
body.modal-open .aios-stage .rings::before, body.modal-open .aios-stage .rings::after,
body.tab-hidden .aios-stage .rings::before, body.tab-hidden .aios-stage .rings::after{animation-play-state:paused !important}
/* custom dropdown — replaces native