/* Tool marks live inside the illustration; no external labelled badges. */
.tool-mark{display:block;object-fit:contain;filter:brightness(0) invert(1);opacity:.82;flex-shrink:0}
.tool-original{filter:none;opacity:1}
.tool-icons{display:flex;align-items:center;gap:10px;position:relative;z-index:2}
.tool-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:color-mix(in srgb,var(--a19-white) 3%,transparent);border:1px solid color-mix(in srgb,var(--a19-white) 8%,transparent);flex:none}
.tool-icon img{width:15px;height:15px}.tool-icon img.tool-original{width:20px;height:20px}
.service-canvas{position:relative;isolation:isolate;width:min(100%,292px);height:186px;display:grid;place-items:center;overflow:hidden;border:1px solid color-mix(in srgb,var(--a19-amethyst) 9%,transparent);border-radius:18px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--a19-violet) 9%,transparent),transparent 75%)}
.service-canvas .marketing-network,.service-canvas .ai-network{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.tool-node circle{fill:var(--a19-onyx);stroke:color-mix(in srgb,var(--a19-amethyst) 20%,transparent);stroke-width:1}
.tool-node{animation:tool-breathe 8s ease-in-out infinite}.tool-node:nth-of-type(2n){animation-delay:-3s}.tool-node:nth-of-type(3n){animation-delay:-5s}
.tool-connection{fill:none;stroke:var(--a19-amethyst);stroke-opacity:.22;stroke-width:1;stroke-dasharray:3 5}
.service-art-ai .core{width:62px;height:62px;border-radius:19px}.service-art-ai .core i{border-radius:14px}
.service-art-search .search-window{width:230px;max-width:100%;padding:11px 14px}
.search-tools{gap:8px;margin-bottom:9px}.search-tools .tool-icon{width:23px;height:23px;background:none;border:0}.search-tools .tool-icon img{width:16px;height:16px}
.service-art-search .search-field{padding:6px 8px;margin-bottom:6px}.service-art-search .search-result{padding:5px}.service-art-search .search-result i:last-child{display:none}.service-art-search .search-sweep{top:91px;height:28px}
.service-art-social .social-tile-front{width:158px;height:162px;translate:-20px 0}.service-art-social .social-tile-back{width:140px;height:155px;translate:33px -5px}
.service-art-social .social-picture{height:94px;background:radial-gradient(circle at 35% 20%,color-mix(in srgb,var(--a19-violet) 65%,var(--a19-onyx)),var(--a19-onyx))}
.social-tools{display:grid;grid-template-columns:repeat(3,26px);gap:10px;padding:9px}.social-tools .tool-icon{background:#0d0c102b;animation:tool-breathe 8s ease-in-out infinite}.social-tools .tool-icon:nth-child(2n){animation-delay:-4s}
.service-art-video .video-window{width:238px;max-width:100%;padding:10px}
.video-tools{gap:7px;margin-bottom:8px}.video-tools .tool-icon{width:24px;height:24px;border:0;background:transparent}.service-art-video .video-frame{height:84px}.service-art-video .video-timeline{height:12px;margin-top:8px}
.service-art-web .dev-window{width:250px;max-width:100%;height:161px;padding:10px}
.service-art-web .code-screen{height:115px;padding:12px;display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:10px;align-items:center}
.code-lines{min-width:0}.code-lines .code-line{margin-bottom:10px}.code-lines .code-line:last-child{margin-bottom:0}
.web-tools{display:grid;grid-template-columns:repeat(3,22px);gap:7px;align-content:center}.web-tools .tool-icon{width:22px;height:22px;border-radius:4px}.web-tools .tool-icon img{width:14px;height:14px}
.service-card .tag-row{gap:6px;flex-wrap:wrap}.service-card .tag-row span{padding:6px 8px;font-size:.62rem;white-space:nowrap}
@keyframes tool-breathe{0%,100%{opacity:.72}50%{opacity:1}}
.motion-paused .tool-node,.motion-paused .tool-icon,.paused .tool-node,.paused .tool-icon{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.tool-node,.tool-icon{animation:none!important}}
/* Visual guide uses the same icon cells; names remain in its reference key. */
.tool-library-row{display:flex;flex-wrap:wrap;gap:12px}.tool-reference{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--a19-text-secondary)}.tool-reference .tool-icon{width:28px;height:28px}

/* Constrain the internal grid track before sizing its mock windows. */
.service-card .service-art{grid-template-columns:minmax(0,1fr);min-width:0}
.service-art-web .dev-window{width:100%;max-width:250px}
.service-art-search .search-window{width:100%;max-width:230px}
.service-art-video .video-window{width:100%;max-width:238px}

/* Each signal uses the same SVG path and clock as its source pulse. */
.signal-path{fill:none;stroke:var(--a19-amethyst);stroke-opacity:.24;stroke-width:1.1}
.signal-dot{fill:var(--a19-amethyst)}.signal-orbit{fill:none;stroke:var(--a19-amethyst);stroke-opacity:.10;stroke-dasharray:2 7}
.signal-node-face{fill:var(--a19-onyx);stroke:var(--a19-amethyst);stroke-opacity:.22;stroke-width:1}
.signal-halo{fill:none;stroke:var(--a19-amethyst);stroke-width:1;opacity:0}
.hub-halo{fill:none;stroke:var(--a19-amethyst);stroke-width:1;opacity:.18;transform-origin:180px 115px;animation:hub-breathe 6.4s ease-in-out infinite}
.hub-chart rect{fill:var(--a19-white);opacity:.75;transform-box:fill-box;transform-origin:center bottom;animation:hub-bar 4s ease-in-out infinite}.hub-chart rect:nth-child(2){animation-delay:-.4s}.hub-chart rect:nth-child(3){animation-delay:-.8s}.hub-chart rect:nth-child(4){animation-delay:-1.2s}
.hub-arrow{fill:none;stroke:var(--a19-white);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;animation:hub-trend 6.4s ease-in-out infinite}
.service-art-ai .core{animation:ai-hub-breathe 6.4s ease-in-out infinite}
@keyframes hub-breathe{0%,100%{scale:1;opacity:.12}50%{scale:1.08;opacity:.34}}
@keyframes hub-bar{0%,100%{scale:1 .75}50%{scale:1 1}}
@keyframes hub-trend{0%,100%{stroke-dashoffset:0;opacity:.85}50%{stroke-dashoffset:14;opacity:.5}}
@keyframes ai-hub-breathe{0%,100%{box-shadow:inset 0 1px 0 #ffffff40,0 0 25px #7b2cbf40}50%{box-shadow:inset 0 1px 0 #ffffff40,0 0 40px #7b2cbf70}}
/* Three rows, three aligned stops. Magnifier stays within the search field. */
.search-results{position:relative;display:grid;grid-template-rows:repeat(3,26px)}
.service-art-search .search-result{height:26px;padding:5px 6px}.service-art-search .search-result b{margin-bottom:4px}.service-art-search .search-result i{margin-bottom:0}
.service-art-search .search-sweep{left:0;right:0;top:0;height:26px;animation:search-rows 9s ease-in-out infinite;pointer-events:none}
.search-field .search-magnifier{margin-left:auto;position:relative;display:block;flex:none;width:10px;height:10px;border:1.5px solid var(--a19-amethyst);border-radius:50%;box-shadow:0 0 9px #7b2cbf30;animation:lens-look 9s ease-in-out infinite}
.search-magnifier::after{content:"";position:absolute;width:5px;height:1.5px;background:var(--a19-amethyst);rotate:45deg;right:-4px;bottom:-2px}
@keyframes search-rows{0%,24%,100%{translate:0 0}33%,57%{translate:0 26px}66%,90%{translate:0 52px}}
@keyframes lens-look{0%,24%,100%{scale:1}33%,57%{scale:1.12}66%,90%{scale:1}}
/* A story on the back card, engagement on the front. No invented metrics. */
.engagement-story{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-around;padding:5px 0}
.engagement-heart{font-size:25px;line-height:1;color:var(--a19-amethyst);animation:engagement-beat 5s ease-in-out infinite}
.engagement-chart{display:flex;align-items:end;gap:3px;height:38px}.engagement-chart i{width:4px;height:40%;border-radius:3px;background:var(--a19-amethyst);transform-origin:bottom;animation:hub-bar 6s ease-in-out infinite}.engagement-chart i:nth-child(2){height:65%;animation-delay:-1s}.engagement-chart i:nth-child(3){height:52%;animation-delay:-2s}.engagement-chart i:nth-child(4){height:92%;animation-delay:-3s}
.engagement-bubble,.social-reply{width:16px;height:12px;border:1px solid var(--a19-amethyst);border-radius:5px;position:relative;animation:reply-rise 7s ease-in-out infinite}.engagement-bubble::after,.social-reply::after{content:"";position:absolute;width:4px;height:4px;border-left:1px solid var(--a19-amethyst);bottom:-4px;left:3px;transform:skewY(-35deg)}
.engagement-spark{position:absolute;right:17px;top:4px;font-size:13px;color:var(--a19-white);animation:reply-rise 7s ease-in-out infinite}
.social-tools{grid-template-columns:repeat(4,23px);gap:7px;padding:8px}.social-tools .tool-icon{width:23px;height:23px}.social-tools .tool-icon img{width:14px;height:14px}
.social-like{display:inline-block;animation:engagement-beat 5s ease-in-out infinite}.social-actions .social-reply{margin-left:auto;width:11px;height:9px;opacity:.65}
@keyframes engagement-beat{0%,35%,100%{scale:1;opacity:.65}45%{scale:1.15;opacity:1}60%{scale:1;opacity:.85}}
@keyframes reply-rise{0%,100%{translate:0 2px;opacity:.45}50%{translate:0 -3px;opacity:.9}}
/* Code appears line by line while the technology marks breathe. */
.code-lines .code-line{transform-origin:left;animation:code-write 6s ease-in-out infinite}.code-lines .code-line:nth-child(2){animation-delay:-4.8s}.code-lines .code-line:nth-child(3){animation-delay:-3.6s}.code-lines .code-line:nth-child(4){animation-delay:-2.4s}
.code-lines .code-line:first-child::after{content:"";width:2px;height:6px;background:var(--a19-amethyst);animation:code-caret 2s ease-in-out infinite}
.web-tools .tool-icon{animation:tech-breathe 7s ease-in-out infinite}.web-tools .tool-icon:nth-child(3n+1){animation-delay:-2s}.web-tools .tool-icon:nth-child(3n+2){animation-delay:-4s}
@keyframes code-write{0%,100%{clip-path:inset(0 40% 0 0);opacity:.5}25%,75%{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes code-caret{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes tech-breathe{0%,100%{border-color:#ffffff14;background:#ffffff08}50%{border-color:#c77dff55;background:#7b2cbf24}}
@media(hover:hover) and (pointer:fine){.social-tools .tool-icon,.web-tools .tool-icon{transition:transform .35s ease,box-shadow .35s ease}.social-tools .tool-icon:hover,.web-tools .tool-icon:hover{transform:translateY(-2px) scale(1.08);box-shadow:0 0 14px #7b2cbf40}.service-card:hover .social-tile-back{filter:brightness(1.12)}}
body.motion-paused .signal-dot,body.motion-paused .signal-halo{display:none}
@media(prefers-reduced-motion:reduce){.signal-dot,.signal-halo{display:none}.signal-hub *,.service-art-ai .core,.search-magnifier,.search-sweep,.engagement-story *,.social-actions *,.code-lines *,.web-tools .tool-icon{animation:none!important}.code-lines .code-line{clip-path:none;opacity:1}}