.service-card h3 { margin-bottom: 12px; }

.service-card p { color: var(--text-soft); font-size: .98rem; }

.cta-pick { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }

/* ---- Mini logo constellations ---- */
.miniverse { position: relative; height: 270px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0c0f17; overflow: hidden; }

.miniverse canvas { display: block; width: 100%; height: 100%; }

/* Consulting & MVP - branching architecture graph, data pulses flow to services */
.sc-arch { width: 100%; height: 42px; overflow: visible; }

.sc-link { stroke: rgba(140,165,235,.3); stroke-width: 2; stroke-dasharray: 4 5; }

.sc-node { fill: #0c0f17; stroke: rgba(109,139,255,.55); stroke-width: 2; animation: sc-nodeglow 2.6s ease infinite; }

.sc-n2 { animation-delay: .5s; }

.sc-n3 { animation-delay: 1s; }

@keyframes sc-nodeglow { 0%,100% { stroke: rgba(109,139,255,.5); } 45% { stroke: var(--accent-2); filter: drop-shadow(0 0 4px rgba(67,231,208,.7)); } }

.sc-pulse { fill: var(--accent-2); filter: drop-shadow(0 0 3px rgba(67,231,208,.85)); }

/* UI/UX Design - a design-system panel: type specimen + colour tokens + type scale.
   Deliberately NOT skeleton bars (those read as a failed loading state) - every
   element is coloured and intentional. */
.sc-ux { display: flex; align-items: center; gap: 12px; }

.sc-ux-aa { position: relative; flex: none; width: 46px; height: 46px; border-radius: 9px;
  display: grid; place-items: center; font-family: var(--font); font-weight: 800; font-size: 1.55rem; line-height: 1;
  background: linear-gradient(140deg, rgba(176,120,255,.18), rgba(67,231,208,.12)); border: 1px solid var(--border-strong); }

.sc-ux-aa span { background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }

.sc-ux-aa::after { content: ""; position: absolute; inset: -1px; border-radius: 9px; /* a11y focus ring */
  animation: sc-focus 3s ease infinite; }

@keyframes sc-focus { 0%,100% { box-shadow: 0 0 0 0 rgba(67,231,208,0); } 45% { box-shadow: 0 0 0 3px rgba(67,231,208,.5); } }

.sc-ux-col { flex: 1; min-width: 0; display: grid; gap: 8px; }

.sc-ux-tok { display: flex; gap: 6px; }

.sc-ux-tok span { flex: 1; height: 15px; border-radius: 4px; background: linear-gradient(120deg, var(--c1), var(--c2));
  background-size: 220% 220%; animation: iu-sheen 2.8s ease infinite; animation-delay: calc(var(--i,0) * .22s); }

.sc-ux-scale { display: grid; gap: 5px; }

.sc-ux-scale i { height: 5px; border-radius: 3px; transform-origin: left;
  background: linear-gradient(90deg, var(--accent), rgba(67,231,208,.55)); animation: sc-uxline 3.2s ease infinite; }

.sc-ux-scale i:nth-child(1) { width: 100%; }

.sc-ux-scale i:nth-child(2) { width: 72%; animation-delay: .18s; }

.sc-ux-scale i:nth-child(3) { width: 48%; animation-delay: .36s; }

@keyframes sc-uxline { 0%,100% { transform: scaleX(.35); opacity: .35; } 45%,82% { transform: scaleX(1); opacity: 1; } }

/* QA & Testing - an automated test runner: each spec resolves from amber "running"
   to a green tick top-to-bottom (with timings), holds all-green, then reruns. */
.sc-test { display: grid; gap: 6px; }

.sc-spec { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .66rem; line-height: 1; }

.sc-st { position: relative; box-sizing: border-box; flex: none; width: 13px; height: 13px; border-radius: 4px;
  border: 1.5px solid rgba(255,183,112,.7); animation: sc-stpass 3.9s ease infinite; }

.sc-st::after { content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: #06070b; opacity: 0; animation: sc-checkin 3.9s ease infinite; }

.sc-spec b { color: var(--text-mute); font-weight: 500; animation: sc-nametint 3.9s ease infinite; }

.sc-spec u { flex: 1; min-width: 8px; height: 0; border-bottom: 1px dotted var(--border-strong); text-decoration: none; }

.sc-spec em { flex: none; font-style: normal; color: var(--text-mute); opacity: .4; animation: sc-msin 3.9s ease infinite; }

.sc-spec:nth-child(2) .sc-st, .sc-spec:nth-child(2) .sc-st::after, .sc-spec:nth-child(2) b, .sc-spec:nth-child(2) em { animation-delay: .45s; }

.sc-spec:nth-child(3) .sc-st, .sc-spec:nth-child(3) .sc-st::after, .sc-spec:nth-child(3) b, .sc-spec:nth-child(3) em { animation-delay: .9s; }

@keyframes sc-stpass {
  0%, 12% { border-color: rgba(255,183,112,.7); background: transparent; box-shadow: none; }
  20%, 92% { border-color: #43e7d0; background: #43e7d0; box-shadow: 0 0 7px rgba(67,231,208,.55); }
  100% { border-color: rgba(255,183,112,.7); background: transparent; box-shadow: none; }
}

@keyframes sc-checkin { 0%, 12% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; transform: scale(1.15); } 26%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.3); } }

@keyframes sc-nametint { 0%, 12% { color: var(--text-mute); } 22%, 92% { color: var(--text); } 100% { color: var(--text-mute); } }

@keyframes sc-msin { 0%, 14% { opacity: .4; color: var(--text-mute); } 24%, 92% { opacity: 1; color: var(--accent-2); } 100% { opacity: .4; color: var(--text-mute); } }

/* Dedicated Teams - senior engineers activate one by one, come online, plug into your team */
.sc-crew { display: flex; align-items: center; gap: 8px; }

.sc-mem { position: relative; flex: none; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--border-strong); animation: sc-join 3.6s ease infinite; }

.sc-mem svg { width: 14px; height: 14px; stroke: rgba(255,255,255,.92); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sc-m1 { background: linear-gradient(140deg, rgba(176,120,255,.55), rgba(109,139,255,.32)); }

.sc-m2 { background: linear-gradient(140deg, rgba(109,139,255,.55), rgba(67,231,208,.32)); animation-delay: .45s; }

.sc-m3 { background: linear-gradient(140deg, rgba(67,231,208,.55), rgba(58,210,154,.32)); animation-delay: .9s; }

.sc-mem::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px;
  border-radius: 50%; background: #3ad29a; border: 2px solid #0c0f17; opacity: .3; animation: sc-online 3.6s ease infinite; }

.sc-m2::after { animation-delay: .45s; }

.sc-m3::after { animation-delay: .9s; }

@keyframes sc-join { 0%,100% { opacity: .4; transform: scale(.72); } 22%,78% { opacity: 1; transform: none; } }

@keyframes sc-online { 0%,30% { opacity: .3; } 55% { opacity: 1; box-shadow: 0 0 6px rgba(58,210,154,.9); } 100% { opacity: 1; } }

.sc-crew-hub { flex: none; width: 27px; height: 27px; border-radius: 50%; margin-left: -2px;
  display: grid; place-items: center; border: 1px dashed rgba(140,165,235,.55);
  color: var(--accent-2); font-family: var(--mono); font-size: .95rem; font-weight: 600; }

.sc-typing { margin-left: auto; display: inline-flex; gap: 4px; }

.sc-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: sc-type 1.4s ease infinite; }

.sc-typing i:nth-child(2) { animation-delay: .2s; }

.sc-typing i:nth-child(3) { animation-delay: .4s; }

@keyframes sc-type { 0%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* API & Integrations - a hub fanning out to services, data packets flowing both ways */
.sc-api { width: 100%; height: 56px; overflow: visible; }

.sc-api-wire { fill: none; stroke: rgba(140,165,235,.28); stroke-width: 1.6; stroke-dasharray: 4 5; }

.sc-api-node { fill: #0c0f17; stroke: rgba(109,139,255,.6); stroke-width: 1.8; animation: sc-nodeglow 2.8s ease infinite; }

.sc-api-node.n2 { animation-delay: .5s; }

.sc-api-node.n3 { animation-delay: 1s; }

.sc-api-hub { fill: rgba(109,139,255,.16); stroke: var(--accent-2); stroke-width: 2; }

.sc-api-ring { fill: none; stroke: var(--accent-2); stroke-width: 1.5; transform-box: fill-box; transform-origin: center;
  animation: sc-apiring 2.6s ease-out infinite; }

@keyframes sc-apiring { 0% { transform: scale(.45); opacity: .8; } 100% { transform: scale(2.3); opacity: 0; } }

.sc-api-pkt { filter: drop-shadow(0 0 3px rgba(67,231,208,.8)); }

.sc-api-txt { fill: var(--accent-2); font-family: var(--mono); font-size: 7.5px; font-weight: 700; letter-spacing: .04em; }

/* SEO & Growth - a rankings curve drawing upward toward #3 */
.sc-seo { display: flex; align-items: center; gap: 12px; }

.sc-growth { flex: 1; height: 38px; }

.sc-growth-line { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 170; stroke-dashoffset: 170; animation: sc-draw 3.2s ease infinite; filter: drop-shadow(0 0 4px rgba(67,231,208,.5)); }

@keyframes sc-draw { 0% { stroke-dashoffset: 170; } 40%,82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: .55; } }

.sc-growth-dot { fill: var(--accent-2); filter: drop-shadow(0 0 3px rgba(67,231,208,.8)); animation: sc-dotpop 3.2s ease infinite; }

@keyframes sc-dotpop { 0%,38% { opacity: 0; } 44% { opacity: 1; } 100% { opacity: 1; } }

.sc-rank { display: grid; justify-items: center; flex: none; line-height: 1; }

.sc-rank b { font-family: var(--mono); font-size: 1.05rem; color: var(--text); font-weight: 700; }

.sc-rank-up { color: var(--accent-2); font-size: .82rem; animation: sc-rankup 2s ease infinite; }

@keyframes sc-rankup { 0%,100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(-2px); opacity: 1; } }

/* Performance - a Lighthouse-style gauge ring filling to 90+ */
.sc-perf { display: flex; align-items: center; gap: 12px; }

.sc-gauge { width: 44px; height: 44px; flex: none; transform: rotate(-90deg); }

.sc-gauge-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; }

.sc-gauge-fill { fill: none; stroke: var(--accent-2); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 113; stroke-dashoffset: 113; animation: sc-gauge 3.2s var(--ease) infinite;
  filter: drop-shadow(0 0 4px rgba(67,231,208,.5)); }

@keyframes sc-gauge { 0% { stroke-dashoffset: 113; } 45%,82% { stroke-dashoffset: 12; } 100% { stroke-dashoffset: 12; } }

.sc-perf-meta { display: grid; gap: 3px; }

.sc-perf-meta b { font-family: var(--mono); font-size: .8rem; color: var(--text); font-weight: 700; }

.sc-perf-meta span { font-family: var(--mono); font-size: .62rem; color: var(--text-mute); letter-spacing: .04em; }