.tone-cyan { --card-tone: 103,232,249; --card-glow: 8,145,178; }
.tone-blue { --card-tone: 147,197,253; --card-glow: 37,99,235; }
.tone-violet { --card-tone: 196,181,253; --card-glow: 124,58,237; }
.tone-green { --card-tone: 110,231,183; --card-glow: 5,150,105; }
.tone-amber { --card-tone: 252,211,77; --card-glow: 180,83,9; }
.tone-teal { --card-tone: 94,234,212; --card-glow: 13,148,136; }
.tone-pink { --card-tone: 249,168,212; --card-glow: 190,24,93; }
.tone-orange { --card-tone: 253,186,116; --card-glow: 194,65,12; }

.gradient-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(var(--card-tone),.22);
  background: radial-gradient(ellipse at 100% 0%,rgba(var(--card-glow),.22),transparent 62%),linear-gradient(155deg,rgba(var(--card-tone),.07),transparent 70%),#0d0e12;
  transition-property: border-color, box-shadow, opacity, transform;
  transition-duration: .25s, .25s, .65s, .65s;
  transition-timing-function: ease;
}
.gradient-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg,transparent,rgba(var(--card-tone),.8),transparent);
  transform: none;
  pointer-events: none;
}
.gradient-panel::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  top: -65px;
  right: -55px;
  border: 1px solid rgba(var(--card-tone),.12);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(var(--card-tone),.035),0 0 0 44px rgba(var(--card-tone),.025);
  pointer-events: none;
}
.gradient-panel:hover, .gradient-panel:focus-within {
  border-color: rgba(var(--card-tone),.5);
  background: radial-gradient(ellipse at 100% 0%,rgba(var(--card-glow),.22),transparent 62%),linear-gradient(155deg,rgba(var(--card-tone),.07),transparent 70%),#0d0e12;
  box-shadow: 0 16px 40px rgba(var(--card-glow),.1);
}
.gradient-panel :is(.cd-eyebrow,.svc-num,.cs-tag) { color: rgb(var(--card-tone)); }
.gradient-panel .cd-rule { background: linear-gradient(90deg,rgb(var(--card-tone)),rgba(var(--card-glow),.6)); }
.gradient-panel .cd-link { background: rgb(var(--card-tone)); }
.gradient-panel .cd-link:hover { background: #fff; }
.gradient-panel .svc-num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--card-tone),.22);
  border-radius: 11px;
  background: linear-gradient(135deg,rgba(var(--card-tone),.14),rgba(var(--card-glow),.08));
}
.services-grid { gap: 16px; }
.svc-card.gradient-panel { border-radius: 14px; }
.dom-card.gradient-panel::before { transform: none; }
.dom-card.gradient-panel .dom-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 1.5rem;
  border: 1px solid rgba(var(--card-tone),.18);
  border-radius: 14px;
  background: linear-gradient(135deg,rgba(var(--card-tone),.13),rgba(var(--card-glow),.08));
}
.stack-grid { gap: 12px; }
.stack-row.gradient-panel { border-radius: 12px; }
.stack-row.gradient-panel .stack-label {
  background: linear-gradient(135deg,rgba(var(--card-tone),.09),rgba(var(--card-glow),.04));
  border-color: rgba(var(--card-tone),.14);
}
.stack-row.gradient-panel .stack-label-txt { color: rgb(var(--card-tone)); }
.stack-row.gradient-panel .chip {
  background: linear-gradient(135deg,rgba(var(--card-tone),.055),rgba(var(--card-glow),.04));
  border-color: rgba(var(--card-tone),.16);
}
.stack-row.gradient-panel .chip.hi { color: rgb(var(--card-tone)); border-color: rgba(var(--card-tone),.3); background: rgba(var(--card-tone),.08); }
.stack-row.gradient-panel .chip:hover { border-color: rgba(var(--card-tone),.5); background: rgba(var(--card-tone),.13); }
.p-cta {
  background: radial-gradient(ellipse at 15% 10%,rgba(37,99,235,.16),transparent 60%),radial-gradient(ellipse at 85% 100%,rgba(124,58,237,.14),transparent 60%),linear-gradient(135deg,#0a101e,#0b0a15);
}
.cs-card.gradient-panel .cs-grad {
  background: linear-gradient(160deg,rgba(var(--card-glow),.18),rgba(5,5,5,.62) 45%,rgba(5,5,5,.97) 100%);
}
.cs-card.gradient-panel:hover .cs-cta, .cs-card.gradient-panel:focus-within .cs-cta { color: rgb(var(--card-tone)); }
.cs-card.gradient-panel:focus-visible { outline: 2px solid rgb(var(--card-tone)); outline-offset: 4px; }
#testimonials {
  scroll-margin-top: 80px;
  padding: 110px 80px;
  border-top: 1px solid rgba(255,255,255,.055);
  background: radial-gradient(ellipse at 80% 20%,rgba(124,58,237,.06),transparent 65%),#08090d;
}
.testimonials-inner { max-width: 1200px; margin: 0 auto; }
.testimonials-heading { margin: 12px 0 48px; font-size: clamp(2rem,4vw,3.4rem); line-height: 1.08; letter-spacing: -.04em; color: var(--t1); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.testimonial-card { display: flex; flex-direction: column; margin: 0; padding: 32px; border: 1px solid rgba(var(--card-tone),.22); border-radius: 14px; }
.testimonial-quote { height: 48px; font-size: 64px; line-height: 1; color: rgb(var(--card-tone)); }
.testimonial-card blockquote { margin: 16px 0 32px; font-size: .92rem; line-height: 1.75; color: var(--t1); }
.testimonial-card figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.testimonial-card figcaption strong { font-size: .85rem; color: rgb(var(--card-tone)); }
.testimonial-card figcaption span { font-size: .76rem; line-height: 1.5; color: var(--t2); }
@media (max-width: 900px) {
  #testimonials { padding: 80px 32px; }
  .testimonials-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  #testimonials { padding: 64px 20px; }
  .testimonial-card { padding: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-panel, .dom-card.gradient-panel { transition: none; }
}