/* AZURIFY — service mockups ("What we build" cards)
   Each card is an artboard: 1em scales with the card (about 64em × 48em on a 4:3 card).
   Layers are placed from the centre, drift with the pointer and tilt in 3D (--mx/--my from studio.js). */
.work-media { container-type: size; }
.art { --ui: #08111f; --panel: #0f1b30; --line: rgba(255,255,255,.08); --mut: #7f93b5; position: absolute; inset: 0; font-size: min(1.55cqw, 2.05cqh); line-height: 1.25; letter-spacing: 0; color: #e6efff; transition: transform 1.1s var(--ease); }
.work-card:hover .art { transform: scale(1.035); }
:where(.art > *) { position: absolute; left: 50%; top: 50%; }
.art img { display: block; }
.art b, .art h4 { font-weight: 600; letter-spacing: -.01em; }
.art h4 { margin: 0; }
.art em, .art s { font-style: normal; text-decoration: none; }
.layer { translate: calc(var(--mx, 0) * var(--d, 1) * 1em) calc(var(--my, 0) * var(--d, 1) * 1em); transition: translate .8s var(--ease), transform .8s var(--ease); }
.tilt { transform: perspective(1800px) rotateX(calc(10deg - var(--my, 0) * 6deg)) rotateY(calc(-16deg + var(--mx, 0) * 10deg)) rotateZ(1.5deg); }
.tilt-r { transform: perspective(1400px) rotateX(calc(8deg - var(--my, 0) * 6deg)) rotateY(calc(-12deg + var(--mx, 0) * 10deg)); }
.float { animation: bob 6s ease-in-out infinite; }
.float.f2 { animation-duration: 7.5s; animation-delay: -2s; }
@keyframes bob { 50% { transform: translateY(-.9em); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(18,216,228,.55); } 100% { box-shadow: 0 0 0 .9em rgba(18,216,228,0); } }
@keyframes grow { from { height: 8%; } }
@keyframes draw { from { stroke-dashoffset: 400; } }
.chip { display: flex; align-items: center; gap: .6em; padding: .75em 1.2em; border-radius: 99px; background: rgba(255,255,255,.94); color: var(--navy); font-size: 1.05em; font-weight: 600; white-space: nowrap; box-shadow: 0 1.4em 3em rgba(3,20,70,.28); backdrop-filter: blur(10px); }
.dark-chip { background: rgba(8,17,31,.78); color: #fff; box-shadow: 0 1.4em 3em rgba(0,8,40,.4), inset 0 0 0 1px rgba(255,255,255,.12); }
.dot { width: .7em; height: .7em; border-radius: 50%; flex: none; }
.dot.ok { background: #22c55e; box-shadow: 0 0 0 .3em rgba(34,197,94,.22); }
.spark { display: flex; align-items: flex-end; gap: .15em; height: 1.4em; }
.spark i { width: .32em; height: var(--h); border-radius: .2em; background: linear-gradient(var(--cyan), var(--azure)); }
.glow { filter: drop-shadow(0 0 .4em rgba(18,216,228,.8)); }

/* ---------- POS ---------- */
.m-pos { background: radial-gradient(90% 80% at 15% 0%, #3d8cff 0%, #0a5cff 38%, #04257a 100%); }
.grid-bg { inset: 0; left: 0; top: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 3em 3em; mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); }
.pos-dev { width: 46em; height: 30em; margin: -16.5em 0 0 -26em; padding: .7em; border-radius: 2.2em; background: linear-gradient(160deg, #24324f, #060b16); box-shadow: .25em .35em 0 #050912, 0 3.5em 6em rgba(0,8,40,.55), inset 0 0 0 1px rgba(255,255,255,.12); }
.pos-ui { height: 100%; display: grid; grid-template-columns: 3.6em 1fr 13.5em; gap: .8em; padding: .8em; border-radius: 1.6em; background: var(--ui); overflow: hidden; }
.ui-side { display: flex; flex-direction: column; align-items: center; gap: .7em; padding-top: .2em; }
.ui-side img { width: 2.1em; margin-bottom: .4em; }
.ui-side i { width: 2.3em; height: 2.3em; border-radius: .7em; display: grid; place-items: center; font-style: normal; font-size: .9em; color: var(--mut); background: rgba(255,255,255,.04); }
.ui-side i.on { color: #fff; background: var(--azure); box-shadow: 0 0 1.2em rgba(10,92,255,.7); }
.pos-main { display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.ui-top { display: flex; align-items: center; gap: .8em; }
.ui-top b { font-size: 1.1em; letter-spacing: .04em; }
.ui-top b span { color: var(--cyan); }
.ui-status { margin-left: auto; display: flex; align-items: center; gap: .4em; padding: .3em .8em; border-radius: 99px; background: rgba(34,197,94,.12); color: #4ade80; font-size: .72em; }
.ui-status i { width: .5em; height: .5em; border-radius: 50%; background: #22c55e; animation: blink 1.6s infinite; }
.ui-av { width: 2em; height: 2em; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--azure)); box-shadow: 0 0 0 .2em rgba(255,255,255,.08); }
.pos-mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.mod { padding: .75em; border-radius: .9em; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.mod i { width: 2em; height: 2em; border-radius: .6em; display: grid; place-items: center; font-style: normal; background: rgba(10,92,255,.18); color: var(--cyan); }
.mod b { display: block; font-size: .88em; margin-top: .55em; }
.mod small { display: block; font-size: .68em; color: var(--mut); margin-top: .1em; }
.mod.hot { background: linear-gradient(140deg, var(--azure), #0a9fd8); box-shadow: 0 .8em 2em rgba(10,92,255,.5), inset 0 1px 0 rgba(255,255,255,.3); }
.mod.hot i { background: rgba(255,255,255,.2); color: #fff; }
.mod.hot small { color: rgba(255,255,255,.8); }
.pos-trend { flex: 1; display: flex; flex-direction: column; padding: .7em .9em; border-radius: .9em; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); min-height: 0; }
.pos-trend span { font-size: .72em; color: var(--mut); }
.pos-trend svg { flex: 1; width: 100%; min-height: 0; overflow: visible; }
.pos-trend path { fill: none; stroke: var(--cyan); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 400; animation: draw 3s var(--ease) both; }
.pos-check { display: flex; flex-direction: column; gap: .7em; padding: 1em; border-radius: 1em; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.pc-h { font-size: 1em; }
.pc-line { display: flex; align-items: center; gap: .6em; }
.pc-line i { width: 2em; height: 2em; border-radius: .6em; flex: none; background: linear-gradient(135deg, #12d8e4, #0a5cff); }
.pc-line i.c2 { background: linear-gradient(135deg, #8b7bff, #4b3cf0); }
.pc-line i.c3 { background: linear-gradient(135deg, #2ee6a6, #0a9f8a); }
.pc-line span { flex: 1; height: .5em; border-radius: 1em; background: rgba(255,255,255,.12); }
.pc-line em { font-size: .75em; color: var(--mut); }
.pc-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; margin-top: auto; }
.pc-pay span { padding: .5em 0; border-radius: .6em; text-align: center; font-size: .7em; color: var(--mut); background: rgba(255,255,255,.05); }
.pc-pay span.on { color: #fff; background: rgba(10,92,255,.3); box-shadow: inset 0 0 0 1px var(--azure); }
.pc-btn { display: flex; justify-content: space-between; align-items: center; padding: .8em 1em; border-radius: .8em; background: linear-gradient(120deg, var(--azure), var(--cyan)); font-weight: 600; box-shadow: 0 .8em 2em rgba(18,216,228,.35); }
.pc-btn i { font-style: normal; }
.pay-card { width: 15em; height: 9.5em; margin: 3.5em 0 0 13.5em; transform: perspective(1000px) rotateY(calc(-28deg + var(--mx, 0) * 12deg)) rotateX(calc(22deg - var(--my, 0) * 10deg)) rotateZ(-12deg); }
.pcd { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 1em; padding: 1em; background: linear-gradient(135deg, #12d8e4, #0a5cff 55%, #0636a8); box-shadow: .3em .4em 0 #04236b, 0 2.5em 4em rgba(0,8,40,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.pcd::before { content: ""; position: absolute; inset: -50% -20%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); animation: sheen 4s ease-in-out infinite; }
@keyframes sheen { from { translate: -60% 0; } to { translate: 60% 0; } }
.pcd img { width: 2.3em; filter: brightness(0) invert(1); }
.nfc { position: absolute; right: 1em; top: .8em; font-weight: 700; letter-spacing: -.15em; color: rgba(255,255,255,.85); }
.chipc { position: absolute; left: 1em; top: 3.9em; width: 2.4em; height: 1.8em; border-radius: .35em; background: linear-gradient(135deg, #f8dd9c, #c9a24d); }
.pcd b { position: absolute; left: 1em; bottom: .9em; font-size: .9em; letter-spacing: .25em; color: #fff; }
.chip-a { margin: -21.5em 0 0 4em; }
.chip-b { margin: 14em 0 0 -29.5em; }

/* ---------- Websites ---------- */
.m-web { background: linear-gradient(140deg, #eaf3ff 0%, #c7dbff 100%); overflow: hidden; }
.blob { border-radius: 50%; filter: blur(2.5em); }
.b1 { width: 26em; height: 26em; margin: -28em 0 0 -40em; background: rgba(18,216,228,.45); }
.b2 { width: 24em; height: 24em; margin: 4em 0 0 14em; background: rgba(10,92,255,.35); }
.browser { width: 44em; height: 30em; margin: -17em 0 0 -27.5em; border-radius: 1.2em; overflow: hidden; background: var(--ui); box-shadow: .3em .4em 0 #0b1a33, 0 3em 6em rgba(10,40,130,.4), inset 0 0 0 1px rgba(255,255,255,.1); }
.br-bar { display: flex; align-items: center; gap: .45em; height: 2.3em; padding: 0 1em; background: #0d1830; }
.br-bar i { width: .7em; height: .7em; border-radius: 50%; background: #ff5f57; }
.br-bar i:nth-child(2) { background: #febc2e; }
.br-bar i:nth-child(3) { background: #28c840; }
.br-url { margin-left: 1em; flex: 1; max-width: 22em; padding: .3em .9em; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--mut); font-size: .75em; }
.br-page { padding: 1.2em 1.6em; background: radial-gradient(60% 70% at 80% 30%, rgba(10,92,255,.25), transparent 70%); height: calc(100% - 2.3em); }
.br-nav { display: flex; align-items: center; gap: 1.3em; font-size: .8em; color: var(--mut); }
.br-nav b { display: flex; align-items: center; gap: .5em; color: #fff; margin-right: auto; letter-spacing: .12em; }
.br-nav b img { width: 1.6em; }
.br-nav em { padding: .45em 1em; border-radius: 99px; background: linear-gradient(120deg, var(--azure), var(--cyan)); color: #fff; }
.br-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.4em; margin-top: 1.4em; align-items: center; }
.br-copy small { color: var(--cyan); font-family: var(--mono); font-size: .66em; letter-spacing: .14em; }
.br-copy h4 { font-size: 2.55em; line-height: 1; letter-spacing: -.035em; margin: .25em 0 .5em; color: #fff; }
.br-copy h4 span { background: linear-gradient(100deg, var(--cyan), #4f8dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.br-copy p { height: .5em; width: 92%; border-radius: 1em; background: rgba(255,255,255,.12); margin: .45em 0; }
.br-copy p.short { width: 62%; }
.br-btns { display: flex; gap: .6em; margin-top: 1.1em; font-size: .8em; }
.br-btns em { padding: .55em 1.1em; border-radius: 99px; background: linear-gradient(120deg, var(--azure), var(--cyan)); color: #fff; box-shadow: 0 .5em 1.4em rgba(18,216,228,.35); }
.br-btns span { padding: .55em 1.1em; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.br-visual { position: relative; height: 12.5em; display: grid; place-items: center; }
.br-visual img { width: 6.5em; filter: drop-shadow(0 0 1.5em rgba(18,216,228,.7)); animation: bob 5s ease-in-out infinite; }
.rg { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(18,216,228,.45); }
.rg.r1 { width: 11em; height: 11em; margin: -5.5em; border-style: dashed; animation: spin 18s linear infinite; }
.rg.r2 { width: 7.5em; height: 7.5em; margin: -3.75em; border-color: rgba(10,92,255,.7); box-shadow: 0 0 2em rgba(10,92,255,.5), inset 0 0 2em rgba(10,92,255,.35); }
.br-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; margin-top: 1.3em; }
.br-cards div { display: flex; align-items: center; gap: .6em; padding: .7em; border-radius: .8em; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); }
.br-cards i { width: 1.9em; height: 1.9em; border-radius: .55em; display: grid; place-items: center; font-style: normal; background: rgba(10,92,255,.22); color: var(--cyan); }
.br-cards b { font-size: .8em; }
.mphone { width: 13em; height: 26em; margin: -8.5em 0 0 13.5em; padding: 1.9em .9em .9em; border-radius: 2.1em; background: var(--ui); border: .5em solid #1b2740; box-shadow: .25em .3em 0 #0b1426, 0 2.5em 5em rgba(10,40,120,.45); display: flex; flex-direction: column; gap: .6em; }
.mp-notch { position: absolute; top: .5em; left: 50%; width: 4em; height: .9em; margin-left: -2em; border-radius: 99px; background: #000; }
.mp-nav { display: flex; justify-content: space-between; align-items: center; }
.mp-nav img { width: 1.4em; }
.mp-nav span { width: 1.2em; height: .55em; border-top: 2px solid #c8d6f0; border-bottom: 2px solid #c8d6f0; }
.mp-hero { height: 7em; border-radius: .8em; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(10,92,255,.45), rgba(8,17,31,0) 70%), #0f1b30; }
.mp-hero img { width: 3.6em; filter: drop-shadow(0 0 1em rgba(18,216,228,.7)); }
.mp-h { font-size: 1.2em; line-height: 1.05; }
.mp-h span { color: var(--cyan); }
.mp-btn { align-self: start; padding: .45em .9em; border-radius: 99px; background: linear-gradient(120deg, var(--azure), var(--cyan)); font-size: .75em; }
.mp-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-top: auto; }
.mp-row i { height: 3.4em; border-radius: .6em; display: grid; place-items: center; font-style: normal; color: var(--cyan); background: var(--panel); }
.code { margin: 10em 0 0 -31.5em; padding: .9em 1.2em; border-radius: 1em; background: rgba(7,15,31,.9); box-shadow: 0 2em 4em rgba(10,40,130,.35), inset 0 0 0 1px rgba(255,255,255,.1); font-family: var(--mono); font-size: .82em; color: #c8d6f0; white-space: nowrap; transform: perspective(1200px) rotateY(calc(16deg + var(--mx, 0) * 8deg)); }
.code p { margin: .2em 0; }
.code .k { color: #c792ea; }
.code .f { color: var(--cyan); }
.code .s { color: #addb67; }
.chip-d { margin: -21em 0 0 2.5em; }

/* ---------- Applications ---------- */
.m-app { background: radial-gradient(90% 90% at 85% 0%, #3cf0f6 0%, #0ab0dc 40%, #0548a0 100%); overflow: hidden; }
.halo { width: 40em; height: 40em; margin: -20em 0 0 -20em; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 62%); }
.aphone { width: 17em; height: 35em; padding: 1.5em 1.1em; border-radius: 2.6em; background: var(--ui); border: .6em solid #050a14; box-shadow: .3em .4em 0 #03204f, 0 3em 6em rgba(0,20,70,.5); display: flex; flex-direction: column; gap: .6em; }
.aphone.front { margin: -18em 0 0 -16em; }
.aphone.back { margin: -16.5em 0 0 1.5em; transform: perspective(1400px) rotateY(calc(-20deg + var(--mx, 0) * 10deg)) rotateX(6deg) rotateZ(6deg) scale(.94); }
.ap-status { display: flex; justify-content: space-between; font-size: .72em; font-weight: 600; color: #c8d6f0; }
.ap-head { display: flex; align-items: center; gap: .5em; }
.ap-head img { width: 1.7em; }
.ap-head b { font-size: .85em; letter-spacing: .14em; }
.bell { margin-left: auto; position: relative; width: 2em; height: 2em; border-radius: 50%; background: rgba(255,255,255,.06); }
.bell::after { content: ""; position: absolute; right: .35em; top: .35em; width: .5em; height: .5em; border-radius: 50%; background: var(--cyan); animation: pulse 1.8s infinite; }
.ap-hi { color: var(--mut); font-size: .8em; margin-top: .3em; }
.ap-name { font-size: 1.35em; margin-top: -.4em; }
.ap-card { display: flex; align-items: center; gap: .9em; padding: 1em; border-radius: 1.1em; background: linear-gradient(135deg, var(--azure), #19c6e6); box-shadow: 0 1em 2.2em rgba(10,92,255,.45); }
.ap-card svg { width: 4.4em; height: 4.4em; rotate: -90deg; flex: none; }
.ap-card .trk, .ap-donut .trk { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 4; }
.ap-card .arc { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 72 100; animation: draw 2.4s var(--ease) both; }
.ap-card small { display: block; font-size: .72em; opacity: .85; }
.ap-card b { font-size: 1.25em; }
.ap-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; }
.ap-actions span { display: grid; justify-items: center; gap: .3em; font-size: .66em; color: var(--mut); }
.ap-actions i { width: 2.9em; height: 2.9em; border-radius: .9em; display: grid; place-items: center; font-style: normal; font-size: 1.35em; background: var(--panel); color: var(--cyan); box-shadow: inset 0 0 0 1px var(--line); }
.ap-list { display: grid; gap: .6em; margin-top: .3em; }
.ap-list div { display: flex; align-items: center; gap: .6em; padding: .55em; border-radius: .8em; background: var(--panel); }
.ap-list i { width: 2.1em; height: 2.1em; border-radius: .6em; flex: none; background: linear-gradient(135deg, var(--cyan), var(--azure)); }
.ap-list i.c2 { background: linear-gradient(135deg, #8b7bff, #4b3cf0); }
.ap-list span { flex: 1; display: grid; gap: .3em; }
.ap-list b { height: .45em; width: 75%; border-radius: 1em; background: rgba(255,255,255,.2); }
.ap-list small { height: .35em; width: 45%; border-radius: 1em; background: rgba(255,255,255,.1); }
.ap-list em { font-size: .68em; padding: .25em .6em; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--mut); }
.ap-list em.live { background: rgba(34,197,94,.15); color: #4ade80; }
.ap-tab { position: absolute; left: 1.1em; right: 1.1em; bottom: .9em; display: flex; justify-content: space-around; padding-top: .7em; border-top: 1px solid var(--line); }
.ap-tab i { width: .65em; height: .65em; border-radius: 50%; background: rgba(255,255,255,.2); }
.ap-tab i.on { background: var(--cyan); box-shadow: 0 0 .8em var(--cyan); }
.ap-title { font-size: 1.2em; margin-top: .4em; }
.ap-donut { position: relative; width: 11em; height: 11em; margin: .6em auto; }
.ap-donut svg { width: 100%; height: 100%; rotate: -90deg; }
.ap-donut .a1 { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-dasharray: 58 100; stroke-linecap: round; }
.ap-donut .a2 { fill: none; stroke: var(--azure); stroke-width: 4; stroke-dasharray: 26 100; stroke-dashoffset: -62; stroke-linecap: round; }
.ap-donut span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6em; color: var(--cyan); }
.ap-bars { display: flex; align-items: flex-end; gap: .45em; height: 7em; padding: .6em; border-radius: .9em; background: var(--panel); }
.ap-bars i { flex: 1; height: var(--h); border-radius: .35em .35em .15em .15em; background: linear-gradient(var(--cyan), var(--azure)); animation: grow 1.6s var(--ease) both; }
.ap-leg { display: grid; gap: .5em; margin-top: .4em; }
.ap-leg span { display: flex; align-items: center; gap: .5em; }
.ap-leg i { width: .7em; height: .7em; border-radius: 50%; background: var(--cyan); }
.ap-leg i.c2 { background: var(--azure); }
.ap-leg b { height: .4em; width: 60%; border-radius: 1em; background: rgba(255,255,255,.15); }
.toast { margin: -22.5em 0 0 -28em; display: flex; align-items: center; gap: .8em; padding: .75em 1.2em .75em .75em; border-radius: 1.1em; background: rgba(8,17,31,.85); box-shadow: 0 1.6em 3em rgba(0,20,70,.35), inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(10px); white-space: nowrap; }
.toast img { width: 2.4em; padding: .35em; border-radius: .75em; background: rgba(255,255,255,.08); }
.toast b { display: block; font-size: .85em; letter-spacing: .12em; }
.toast small { display: block; font-size: .8em; color: #c8d6f0; }

/* ---------- Bots & automation ---------- */
.m-bot { background: radial-gradient(80% 80% at 80% 20%, #0f2a5c 0%, #071430 55%, #040b1c 100%); overflow: hidden; }
.dots-bg { inset: 0; left: 0; top: 0; background-image: radial-gradient(rgba(140,180,255,.18) 1px, transparent 1.2px); background-size: 1.8em 1.8em; }
.chatwin { width: 31em; height: 35.5em; margin: -18.5em 0 0 -30em; display: flex; flex-direction: column; border-radius: 1.5em; overflow: hidden; background: rgba(16,30,58,.94); box-shadow: .3em .4em 0 #050c1d, 0 3em 6em rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); color: #dbe6ff; }
.cw-head { display: flex; align-items: center; gap: .8em; padding: 1em 1.2em; border-bottom: 1px solid rgba(255,255,255,.07); }
.cw-av { width: 2.7em; height: 2.7em; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(18,216,228,.35), rgba(10,92,255,.25)); box-shadow: 0 0 1.4em rgba(18,216,228,.4); flex: none; }
.cw-av img { width: 1.6em; }
.cw-head b { display: block; color: #fff; }
.cw-head small { display: flex; align-items: center; gap: .4em; font-size: .75em; color: #8ea3c8; }
.cw-head small i { width: .5em; height: .5em; border-radius: 50%; background: #22c55e; }
.cw-body { flex: 1; display: flex; flex-direction: column; gap: .7em; padding: 1.2em; }
.cw-body .m { max-width: 82%; padding: .7em 1em; border-radius: 1.1em; font-size: .9em; }
.cw-body .in { align-self: flex-end; background: var(--azure); color: #fff; border-bottom-right-radius: .3em; }
.cw-body .out { align-self: flex-start; background: rgba(255,255,255,.08); border-bottom-left-radius: .3em; }
.cw-body .typing { display: flex; gap: .3em; padding: .9em 1em; }
.cw-body .typing i { width: .45em; height: .45em; border-radius: 50%; background: var(--cyan); animation: blink 1.2s infinite; }
.cw-body .typing i:nth-child(2) { animation-delay: .2s; }
.cw-body .typing i:nth-child(3) { animation-delay: .4s; }
.cw-quick { display: flex; flex-wrap: wrap; gap: .4em; padding: 0 1.2em .8em; }
.cw-quick span { padding: .4em .85em; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(18,216,228,.5); color: var(--cyan); font-size: .75em; }
.cw-input { display: flex; align-items: center; margin: 0 1em 1em; padding: .75em 1.1em; border-radius: 99px; background: rgba(255,255,255,.06); color: #6f84a8; font-size: .85em; }
.cw-input i { margin-left: auto; color: var(--cyan); font-style: normal; }
.flow { width: 21em; margin: -16em 0 0 6.5em; display: flex; flex-direction: column; }
.fn { display: flex; align-items: center; gap: .75em; padding: .75em 1em; border-radius: 1em; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #dbe6ff; font-size: .95em; backdrop-filter: blur(8px); }
.fi { width: 2em; height: 2em; border-radius: .65em; display: grid; place-items: center; background: rgba(10,92,255,.3); color: var(--cyan); flex: none; }
.fn.hl { box-shadow: inset 0 0 0 1px var(--cyan), 0 0 2.4em rgba(18,216,228,.3); }
.fn.ok .fi { background: rgba(34,197,94,.25); color: #4ade80; }
.fl { width: 2px; height: 2.2em; margin-left: 2em; background: repeating-linear-gradient(180deg, var(--cyan) 0 .35em, transparent .35em .7em); background-size: 2px 1.4em; animation: flowdash 1s linear infinite; opacity: .8; }
@keyframes flowdash { to { background-position: 0 1.4em; } }
.ai-orb { width: 7em; height: 7em; margin: 9em 0 0 21em; }
.ai-orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(18,216,228,.6); animation: spin 10s linear infinite; }
.ai-orb .o2 { inset: 1.1em; border-style: solid; border-color: rgba(10,92,255,.8) transparent; animation-duration: 4s; animation-direction: reverse; }
.ai-orb .core { position: absolute; inset: 2.3em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--cyan) 35%, var(--azure) 75%); box-shadow: 0 0 2.5em rgba(18,216,228,.8); animation: pulse 2s infinite; }

/* ---------- Business growth ---------- */
.m-growth { background: linear-gradient(120deg, #f5f8ff 0%, #d4e3fb 100%); overflow: hidden; }
.b3 { width: 34em; height: 34em; margin: -30em 0 0 10em; background: rgba(18,216,228,.35); }
.dash { width: min(78em, 92cqw); height: 36em; display: grid; grid-template-columns: 9em 1fr; border-radius: 1.3em; overflow: hidden; background: var(--ui); box-shadow: .3em .4em 0 #0b1a33, 0 3em 6em rgba(10,50,150,.3), inset 0 0 0 1px rgba(255,255,255,.08); transform: translate(-50%, -44%) perspective(2400px) rotateX(calc(9deg - var(--my, 0) * 5deg)) rotateY(calc(var(--mx, 0) * 6deg)); }
.d-side { display: flex; flex-direction: column; gap: .8em; padding: 1.3em 1em; background: #050a14; }
.d-logo { display: flex; align-items: center; gap: .5em; font-size: .9em; margin-bottom: .6em; }
.d-logo img { width: 1.6em; }
.d-side span { height: 1.9em; border-radius: .55em; background: rgba(255,255,255,.05); }
.d-side span.on { background: var(--azure); box-shadow: 0 0 1.2em rgba(10,92,255,.6); }
.d-main { display: flex; flex-direction: column; gap: 1.1em; padding: 1.4em 1.6em; min-width: 0; background: radial-gradient(60% 60% at 90% 0%, rgba(10,92,255,.18), transparent 70%); }
.d-top { display: flex; justify-content: space-between; align-items: center; }
.d-top b { font-size: 1.3em; }
.d-pills { display: flex; gap: .3em; padding: .25em; border-radius: 99px; background: rgba(255,255,255,.06); }
.d-pills em { padding: .3em .8em; border-radius: 99px; font-size: .78em; color: var(--mut); }
.d-pills em.on { background: var(--azure); color: #fff; }
.d-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.d-kpis div { display: flex; flex-direction: column; gap: .4em; padding: .9em 1.1em; border-radius: .9em; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.d-kpis small { font-size: .8em; color: var(--mut); }
.d-kpis svg { width: 100%; height: 2.6em; overflow: visible; }
.d-kpis path { fill: none; stroke: var(--cyan); stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 .3em rgba(18,216,228,.7)); }
.d-kpis .up { font-size: .75em; color: #4ade80; font-weight: 600; }
.d-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .9em 1.1em .6em; border-radius: .9em; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.d-chart svg { flex: 1; width: 100%; min-height: 0; overflow: visible; }
.d-chart .area { fill: url(#gfill); }
.d-chart .line { fill: none; stroke: var(--cyan); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 .4em rgba(18,216,228,.8)); stroke-dasharray: 600; animation: draw 3s var(--ease) both; }
.d-chart .line2 { fill: none; stroke: var(--azure); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.d-months { display: flex; justify-content: space-between; font-size: .75em; color: var(--mut); padding-top: .4em; }
.steps-chip { margin: -22.6em 0 0 calc(min(78em, 92cqw) / -2 + 2em); display: flex; align-items: center; gap: .55em; padding: .55em; border-radius: 99px; background: rgba(255,255,255,.95); box-shadow: 0 1.6em 3em rgba(10,50,150,.25); font-weight: 600; white-space: nowrap; color: var(--navy); }
.steps-chip span { padding: .45em .9em; border-radius: 99px; background: #eef2f8; }
.steps-chip span.on { background: var(--azure); color: #fff; }
.steps-chip i { font-style: normal; color: #8a95aa; }

/* Phones and touch screens: skip background blur on the mockup chips (costly while scrolling). */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .chip, .toast, .fn { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .toast { background: rgba(8,17,31,.95); }
}