/* services-premium.css
   Premium visual upgrade + viewport-fit fixes for services.html
   Loaded last — overrides where specificity allows.
*/

/* ═══════════════════════════════════════════════════════════════
   1. OVERFLOW GUARD + HERO LAYOUT FIX
   ═══════════════════════════════════════════════════════════════ */
main { overflow-x: clip; }

/* Grid cells need min-width:0 so text cannot overflow into sibling columns */
.service-hero-layout > * {
  min-width: 0;
}

/* Give left text column more breathing room; shrink image column minimum */
.service-hero-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr) !important;
  gap: clamp(2rem, 4vw, 4.5rem) !important;
}

/* Slightly tighten heading at mid-range viewports so it never overflows */
.page-hero h1 {
  font-size: clamp(3rem, 5.5vw, 6.15rem) !important;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════════════════
   2. HERO — richer atmosphere, gradient metric numbers
   ═══════════════════════════════════════════════════════════════ */
.page-hero {
  background:
    radial-gradient(ellipse 72% 62% at 16% -8%, rgba(88, 28, 235, 0.24), transparent),
    radial-gradient(ellipse 54% 48% at 88% 22%, rgba(22, 193, 255, 0.15), transparent),
    radial-gradient(circle at 72% 96%, rgba(167, 139, 250, 0.14), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), transparent 68%),
    #060810 !important;
}

/* Gradient numbers in metric cards */
.service-hero-metrics strong {
  display: block !important;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important;
  background: linear-gradient(135deg, #f1f5f9 8%, #a78bfa 50%, #22d3ee) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 0.45rem !important;
}

/* Metric card glass polish */
.service-hero-metrics div {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.11) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 20px rgba(0, 0, 0, 0.32) !important;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.service-hero-metrics div::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.7), rgba(34, 211, 238, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}

.service-hero-metrics div:hover {
  border-color: rgba(139, 92, 246, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(139, 92, 246, 0.14) !important;
}

.service-hero-metrics div:hover::before { opacity: 1; }

/* Proof chips: glowing dots */
.service-proof span::before {
  background: var(--cyan) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.72) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. SERVICE NAV — animated bottom-line indicator
   ═══════════════════════════════════════════════════════════════ */
.service-nav-inner {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.3) !important;
}

.service-nav a {
  position: relative;
  overflow: hidden;
}

.service-nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.75rem; right: 0.75rem;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}

.service-nav a:hover::after { transform: scaleX(1); }

.sn-title {
  color: rgba(240, 244, 255, 0.9) !important;
  font-size: 0.9rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. STARTING POINTS — gradient card accent
   ═══════════════════════════════════════════════════════════════ */
.starting-points {
  padding: clamp(4.8rem, 7vw, 7rem) 0 !important;
}

.start-grid article {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 0%, rgba(34, 211, 238, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  transition: border-color 0.24s, transform 0.24s, box-shadow 0.24s;
}

.start-grid article::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.45), transparent);
}

.start-grid article:hover {
  border-color: rgba(34, 211, 238, 0.24) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
}

.start-grid strong {
  font-size: 1.0rem !important;
  color: var(--text) !important;
  line-height: 1.3;
}

.start-grid span {
  font-size: 0.84rem !important;
  color: rgba(240, 244, 255, 0.66) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. SERVICE SUITE — richer card glow
   ═══════════════════════════════════════════════════════════════ */
.service-suite {
  background:
    radial-gradient(circle at 88% 0%, rgba(139, 92, 246, 0.1), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.016), transparent 72%) !important;
}

.service-suite-grid article {
  position: relative;
  overflow: hidden;
}

.service-suite-grid article::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55), transparent);
  transition: background 0.25s;
}

.service-suite-grid article:hover::before {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.8), rgba(34, 211, 238, 0.55), transparent);
}

.service-suite-grid article:hover {
  border-color: rgba(139, 92, 246, 0.32) !important;
  box-shadow:
    0 28px 78px rgba(0, 0, 0, 0.38),
    0 0 36px rgba(139, 92, 246, 0.12) !important;
}

.service-suite-grid h3 {
  font-size: 1.22rem !important;
  line-height: 1.2;
}

.service-suite-grid a {
  transition: gap 0.2s, color 0.2s, opacity 0.2s;
}

.service-suite-grid a:hover {
  color: #fff !important;
  gap: 0.65rem;
}

/* ═══════════════════════════════════════════════════════════════
   6. SERVICE BLOCKS — polished icons, stat callouts, visuals
   ═══════════════════════════════════════════════════════════════ */

/* Icon box: stronger glow */
.sb-icon {
  background:
    radial-gradient(circle at 50% 10%, rgba(34, 211, 238, 0.36), transparent 65%),
    rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: var(--cyan) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 28px rgba(34, 211, 238, 0.14) !important;
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}

.sb-inner:hover .sb-icon {
  border-color: rgba(34, 211, 238, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 44px rgba(34, 211, 238, 0.28) !important;
  transform: translateY(-2px);
}

/* SVG icons: brighter + glow */
.sb-icon svg {
  width: 32px !important;
  height: 32px !important;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.55));
}

/* Service block title: tighter tracking */
.sb-title {
  letter-spacing: -0.044em !important;
}

/* Stat callout divs (inline-styled green stat boxes) */
.sb-inner > div > div:has(> strong[style*="#34d399"]),
.sb-inner > div > div:has(> strong[style*="color:#34d399"]) {
  border-radius: 12px !important;
  border-color: rgba(52, 211, 153, 0.28) !important;
  background: rgba(52, 211, 153, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(52, 211, 153, 0.1),
    0 0 20px rgba(52, 211, 153, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Feature list: tighter, better check marks */
.sb-features li::before {
  border-color: #22d3ee !important;
}

/* Visual panel: richer lighting */
.sb-visual {
  background:
    radial-gradient(circle at 50% 30%, rgba(34, 211, 238, 0.3), transparent 15rem),
    radial-gradient(circle at 12% 88%, rgba(139, 92, 246, 0.16), transparent 12rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
    var(--bg2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 22px 64px rgba(0, 0, 0, 0.32) !important;
}

/* Service image panels: smoother image polish */
.service-shot img {
  filter: saturate(0.9) contrast(1.06) !important;
  transition: transform 0.38s ease, filter 0.38s ease !important;
}

.sb-inner:hover .service-shot img {
  transform: scale(1.038) !important;
  filter: saturate(1.0) contrast(1.08) !important;
}

/* Service block: richer background radials per block */
#custom-software .sb-inner {
  background:
    radial-gradient(circle at 8% 8%, rgba(96, 165, 250, 0.08), transparent 20rem),
    radial-gradient(circle at 100% 20%, rgba(139, 92, 246, 0.06), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 36%),
    rgba(255, 255, 255, 0.014) !important;
}

#ai-integration .sb-inner {
  background:
    radial-gradient(circle at 8% 8%, rgba(34, 211, 238, 0.09), transparent 20rem),
    radial-gradient(circle at 100% 20%, rgba(167, 139, 250, 0.07), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 36%),
    rgba(255, 255, 255, 0.014) !important;
}

#cybersecurity .sb-inner {
  background:
    radial-gradient(circle at 8% 8%, rgba(52, 211, 153, 0.07), transparent 20rem),
    radial-gradient(circle at 100% 20%, rgba(34, 211, 238, 0.07), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 36%),
    rgba(255, 255, 255, 0.014) !important;
}

#data-analytics .sb-inner {
  background:
    radial-gradient(circle at 8% 8%, rgba(251, 191, 36, 0.06), transparent 20rem),
    radial-gradient(circle at 100% 20%, rgba(34, 211, 238, 0.08), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 36%),
    rgba(255, 255, 255, 0.014) !important;
}

#mobile-apps .sb-inner {
  background:
    radial-gradient(circle at 8% 8%, rgba(96, 165, 250, 0.09), transparent 20rem),
    radial-gradient(circle at 100% 20%, rgba(139, 92, 246, 0.07), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 36%),
    rgba(255, 255, 255, 0.014) !important;
}

#consulting .sb-inner {
  background:
    radial-gradient(circle at 8% 8%, rgba(167, 139, 250, 0.08), transparent 20rem),
    radial-gradient(circle at 100% 20%, rgba(34, 211, 238, 0.07), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 36%),
    rgba(255, 255, 255, 0.014) !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. PROOF STRIP — richer image hover + card treatment
   ═══════════════════════════════════════════════════════════════ */
.proof-strip {
  background:
    radial-gradient(ellipse 60% 52% at 88% 0%, rgba(139, 92, 246, 0.14), transparent),
    radial-gradient(ellipse 40% 36% at 12% 100%, rgba(34, 211, 238, 0.09), transparent),
    rgba(255, 255, 255, 0.006) !important;
}

.proof-grid article {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.016)) !important;
  transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease !important;
  overflow: hidden;
}

.proof-grid img {
  filter: saturate(0.84) contrast(1.04);
  transition: filter 0.38s ease, transform 0.38s ease;
}

.proof-grid article:hover {
  border-color: rgba(139, 92, 246, 0.28) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(139, 92, 246, 0.12) !important;
}

.proof-grid article:hover img {
  filter: saturate(1.0) contrast(1.06);
  transform: scale(1.026);
}

.proof-grid span {
  color: rgba(52, 211, 153, 0.88) !important;
  letter-spacing: 0.12em !important;
}

.proof-grid h3 {
  font-size: 1.08rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. PROCESS — gradient step numbers
   ═══════════════════════════════════════════════════════════════ */
.ps-num {
  width: 54px !important;
  height: 54px !important;
  background:
    radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.18), transparent 48%),
    linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(139, 92, 246, 0.2)) !important;
  border-color: rgba(34, 211, 238, 0.24) !important;
  color: rgba(125, 211, 252, 0.92) !important;
  font-size: 1.08rem !important;
  font-family: var(--font-mono) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 20px rgba(34, 211, 238, 0.1) !important;
}

.ps-title {
  font-size: 1.14rem !important;
  color: var(--text) !important;
  margin-bottom: 0.6rem !important;
}

.ps-item {
  position: relative;
  overflow: hidden;
}

.ps-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
}

/* ═══════════════════════════════════════════════════════════════
   9. ENGAGEMENT MODELS — featured card spotlight
   ═══════════════════════════════════════════════════════════════ */
.engagements {
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.08), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent 66%) !important;
}

.engagement-grid article {
  position: relative;
  overflow: hidden;
  transition: transform 0.24s, border-color 0.24s, box-shadow 0.24s;
}

.engagement-grid article::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.engagement-grid article:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38) !important;
}

.featured-engagement {
  background:
    radial-gradient(ellipse 68% 55% at 50% -8%, rgba(34, 211, 238, 0.2), transparent),
    radial-gradient(circle at 88% 100%, rgba(139, 92, 246, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(8, 12, 24, 0.92) !important;
  border-color: rgba(34, 211, 238, 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.1),
    0 28px 90px rgba(0, 0, 0, 0.42),
    0 0 52px rgba(34, 211, 238, 0.12) !important;
}

.featured-engagement::before {
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent) !important;
}

.featured-engagement h3 {
  color: #fff !important;
}

.featured-engagement:hover {
  border-color: rgba(34, 211, 238, 0.44) !important;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.14),
    0 36px 100px rgba(0, 0, 0, 0.48),
    0 0 64px rgba(34, 211, 238, 0.18) !important;
}

.eng-kicker {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.24) !important;
  color: rgba(167, 139, 250, 0.92) !important;
}

.featured-engagement .eng-kicker {
  background: rgba(34, 211, 238, 0.1) !important;
  border-color: rgba(34, 211, 238, 0.26) !important;
  color: rgba(125, 211, 252, 0.92) !important;
}

/* ═══════════════════════════════════════════════════════════════
   10. HIRE TEAM + TEAM ROSTER
   ═══════════════════════════════════════════════════════════════ */
.hire-team-inner {
  background:
    radial-gradient(circle at 8% 8%, rgba(34, 211, 238, 0.09), transparent 22rem),
    radial-gradient(circle at 92% 92%, rgba(139, 92, 246, 0.09), transparent 22rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.068), transparent 38%),
    rgba(8, 12, 24, 0.76) !important;
}

.team-pods article {
  position: relative;
  overflow: hidden;
  transition: border-color 0.24s, transform 0.24s, box-shadow 0.24s;
}

.team-pods article:hover {
  border-color: rgba(34, 211, 238, 0.24) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.32);
}

/* Team roster: richer section background */
.team-roster-band {
  background:
    radial-gradient(circle at 88% 0%, rgba(139, 92, 246, 0.09), transparent 28rem),
    radial-gradient(circle at 12% 100%, rgba(34, 211, 238, 0.07), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent 68%) !important;
}

/* Team member cards */
.team-member-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.24s, border-color 0.24s, box-shadow 0.24s;
}

.team-member-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
}

.team-member-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, 0.22) !important;
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.34),
    0 0 36px rgba(34, 211, 238, 0.09) !important;
}

.team-member-card.lead-card {
  background:
    radial-gradient(circle at 20% 0%, rgba(34, 211, 238, 0.11), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(8, 12, 24, 0.84) !important;
  border-color: rgba(34, 211, 238, 0.26) !important;
}

.team-member-card.lead-card::before {
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent);
}

/* Icon avatars for non-photo members */
.member-avatar:not(.photo-avatar) {
  background:
    radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.22), transparent 44%),
    linear-gradient(135deg, rgba(34, 211, 238, 0.38), rgba(139, 92, 246, 0.38)) !important;
  border-color: rgba(34, 211, 238, 0.22) !important;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.14);
}

/* ═══════════════════════════════════════════════════════════════
   11. FAQ — open state polish + chevron indicator
   ═══════════════════════════════════════════════════════════════ */
.services-faq {
  background:
    radial-gradient(ellipse 62% 52% at 50% 0%, rgba(34, 211, 238, 0.09), transparent),
    radial-gradient(circle at 88% 100%, rgba(139, 92, 246, 0.08), transparent 28rem),
    rgba(255, 255, 255, 0.006) !important;
}

.faq-list details {
  transition: border-color 0.24s, box-shadow 0.24s;
}

.faq-list details[open] {
  border-color: rgba(34, 211, 238, 0.24) !important;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.07) !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(34, 211, 238, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016)),
    rgba(8, 12, 24, 0.9) !important;
}

.faq-list details[open] summary {
  color: #fff !important;
}

.faq-list summary {
  transition: color 0.18s;
  font-size: 0.97rem !important;
  font-weight: 600 !important;
}

.faq-list summary:hover { color: #fff; }

.faq-list summary::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.07);
  flex-shrink: 0;
  font-size: 0.88rem;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
}

.faq-list details[open] summary::after {
  background: rgba(34, 211, 238, 0.14);
  border-color: rgba(34, 211, 238, 0.38);
}

/* ═══════════════════════════════════════════════════════════════
   12. BLOG / RELATED POSTS — card consistency
   ═══════════════════════════════════════════════════════════════ */
.related-posts {
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.09), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.016), transparent 64%) !important;
}

.related-grid article {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    rgba(8, 12, 24, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.24) !important;
  transition: transform 0.24s, border-color 0.24s, box-shadow 0.24s !important;
}

.related-grid article::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5), transparent);
}

.related-grid article:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.38),
    0 0 36px rgba(139, 92, 246, 0.12) !important;
}

.related-grid h3 {
  font-family: var(--font-head) !important;
  font-size: 1.04rem !important;
  line-height: 1.32 !important;
}

.related-grid a {
  color: var(--text) !important;
  text-decoration: none;
  transition: color 0.18s !important;
}

.related-grid a:hover { color: var(--cyan) !important; }

/* ═══════════════════════════════════════════════════════════════
   13. CTA — stronger purple atmosphere
   ═══════════════════════════════════════════════════════════════ */
.cta-section {
  background:
    radial-gradient(ellipse 82% 66% at 50% -10%, rgba(88, 28, 235, 0.40), transparent),
    radial-gradient(ellipse 50% 40% at 50% 112%, rgba(22, 193, 255, 0.15), transparent),
    rgba(6, 14, 30, 0.98) !important;
}

.cta-inner {
  background:
    radial-gradient(ellipse 80% 65% at 50% -15%, rgba(139, 92, 246, 0.14), transparent),
    linear-gradient(145deg, rgba(255, 255, 255, 0.072), transparent 38%),
    rgba(255, 255, 255, 0.028) !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 36px 100px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(139, 92, 246, 0.14) !important;
}

.cta-inner h2 {
  font-size: clamp(2.7rem, 5.2vw, 4.5rem) !important;
  letter-spacing: -0.044em !important;
  line-height: 0.96 !important;
}

.cta-proof span {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(240, 244, 255, 0.56) !important;
  font-size: 0.76rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. RESPONSIVE — fix service nav at mid widths + section fit
   ═══════════════════════════════════════════════════════════════ */

/* Team roster: 4 cards, 2+2 at tablet */
@media (max-width: 1040px) {
  .team-roster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .team-roster-grid {
    grid-template-columns: 1fr !important;
  }

  /* Smaller CTA heading on mobile */
  .cta-inner h2 {
    font-size: clamp(2.2rem, 10vw, 3rem) !important;
  }

  /* Compact engagement grid */
  .engagement-grid article {
    min-height: auto !important;
  }
}

/* Prevent metric grid from squishing too much */
@media (max-width: 540px) {
  .service-hero-metrics {
    grid-template-columns: 1fr !important;
  }

  /* Proof chips: stack properly */
  .service-proof {
    gap: 0.5rem;
  }

  /* Section title size check */
  .section-title {
    font-size: clamp(1.85rem, 8.5vw, 3rem) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   15. LIGHT MODE PRESERVATIONS
   ═══════════════════════════════════════════════════════════════ */
html.light-mode .service-hero-metrics strong,
body.light-mode .service-hero-metrics strong {
  background: linear-gradient(135deg, #0f172a 8%, #1d4ed8 50%, #0f766e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html.light-mode .sb-icon,
body.light-mode .sb-icon {
  background:
    radial-gradient(circle at 50% 10%, rgba(37, 99, 235, 0.2), transparent 65%),
    rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
  color: #1d4ed8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 20px rgba(37, 99, 235, 0.1) !important;
}

html.light-mode .sb-icon svg,
body.light-mode .sb-icon svg {
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.35)) !important;
}