/* ==========================================================================
   NORTHGRID Design System — Light premium enterprise aesthetic
   Stripe / Vercel / IBM Consulting inspired · ~70% light surfaces
   Load after page CSS, before image-card-overlay.css
   ========================================================================== */

:root {
  /* Typography */
  --ng-heading: #0f172a;
  --ng-body: #475569;
  --ng-body-muted: #64748b;
  --ng-label: #2f6bff;
  --ng-label-muted: #2563eb;

  /* Surfaces */
  --ng-white: #ffffff;
  --ng-frost: #fcfdff;
  --ng-mist-1: #f8faff;
  --ng-mist-2: #eef5ff;
  --ng-dark: #0e1a2b;
  --ng-dark-deep: #132238;

  /* Borders & shadows */
  --ng-border: #e6edf8;
  --ng-border-hover: rgba(47, 107, 255, 0.32);
  --ng-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.04);
  --ng-shadow-md: 0 10px 32px rgba(15, 23, 42, 0.08);
  --ng-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.1);
  --ng-shadow-hover: 0 22px 48px rgba(47, 107, 255, 0.14);

  /* Service icon accents (backgrounds only) */
  --ng-accent-cloud: #eef7ff;
  --ng-accent-ai: #f5f1ff;
  --ng-accent-cyber: #effcf7;
  --ng-accent-analytics: #fff8ec;

  /* Section rhythm — tighter enterprise density */
  --ng-gradient-section: linear-gradient(180deg, #ffffff 0%, #f8faff 52%, #eef5ff 100%);
  --ng-gradient-section-alt: linear-gradient(165deg, #fcfdff 0%, #f8faff 45%, #eef5ff 100%);
  --ng-section-y: clamp(5rem, 7vw, 6rem);
  --ng-section-y-compact: clamp(4rem, 5.5vw, 5.25rem);
  --ng-section-y-mobile: clamp(3.5rem, 8vw, 4.5rem);
  --ng-radius: 24px;
  --ng-radius-lg: 24px;
  --ng-shadow-card: 0 16px 40px rgba(15, 23, 42, 0.06);
  --ng-shadow-card-hover: 0 22px 48px rgba(47, 107, 255, 0.12), 0 16px 40px rgba(15, 23, 42, 0.08);
  --ng-card-lift: -6px;
  --ng-reveal-y: 14px;
  --ng-reveal-duration: 0.5s;

  /* Align legacy tokens */
  --text-color: var(--ng-heading);
  --text-light: var(--ng-body);
  --bg-mist-start: var(--ng-mist-1);
  --bg-mist-end: var(--ng-mist-2);
  --primary-color: var(--ng-label);

  /* Dark section system — never inherit light-theme text tokens */
  --ds-dark-bg: linear-gradient(135deg, #0f1b2e 0%, #16305b 55%, #10223c 100%);
  --ds-dark-glow: radial-gradient(circle at top right, rgba(47, 107, 255, 0.18), transparent 60%);
  --ds-dark-heading: #ffffff;
  --ds-dark-body: rgba(255, 255, 255, 0.82);
  --ds-dark-body-muted: rgba(255, 255, 255, 0.72);
  --ds-dark-list: rgba(255, 255, 255, 0.78);
  --ds-dark-eyebrow: #58c8ff;
  --ds-dark-card-bg: rgba(255, 255, 255, 0.05);
  --ds-dark-card-border: rgba(255, 255, 255, 0.08);
  --ds-dark-btn-secondary-bg: rgba(255, 255, 255, 0.08);
  --ds-dark-btn-secondary-border: rgba(255, 255, 255, 0.15);
  --ds-dark-btn-secondary-hover-bg: #ffffff;
  --ds-dark-btn-secondary-hover-text: #0f172a;
}

/* ---------- Global typography ---------- */
body {
  color: var(--ng-body);
  background-color: var(--ng-white);
}

h1, h2, h3, h4, h5, h6,
.section-title,
.sd-display,
.ent-display,
.about-display {
  color: var(--ng-heading) !important;
  font-weight: 700;
  line-height: 1.2;
}

.sd-display,
.ent-display,
.about-display,
.page-header-title {
  font-weight: 800 !important;
}

p,
.sd-lead,
.ent-lead,
.about-lead,
li,
.text-muted {
  font-weight: 500;
  line-height: 1.65;
  color: #475569 !important;
}

.section-dark p,
#tech-stack-sec p,
#process-sec p,
.sd-section--ink p,
.ent-section--ink p,
.pre-footer-cta p,
.page-header-desc,
.hero-home p {
  color: inherit !important;
}

.sd-eyebrow,
.ent-eyebrow,
.about-eyebrow,
.about-kicker,
.page-header-label,
.section-subtitle,
.hero-tag {
  color: var(--ng-label) !important;
}

/* ==========================================================================
   GLOBAL DARK SECTION SYSTEM
   One utility + legacy aliases — overrides light-theme typography tokens
   ========================================================================== */

:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) {
  background: var(--ds-dark-bg) !important;
  color: var(--ds-dark-body) !important;
  position: relative;
  overflow: hidden;
}

:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ds-dark-glow);
  pointer-events: none;
  z-index: 0;
}

:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) > .container,
:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) > .sd-fx,
:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) > .ent-fx,
:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) > .about-section-fx,
:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) > .pre-footer-cta-inner {
  position: relative;
  z-index: 1;
}

/* Headings — never inherit --ng-heading / --text-color */
:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) :is(h1, h2, h3, h4, h5, h6, .section-title, .sd-display, .ent-display, .about-display, .pre-footer-cta-title, .process-flow-title, .careers-block-title, .careers-recruit-title) {
  color: var(--ds-dark-heading) !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
}

/* Body copy */
:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) :is(p, .sd-lead, .ent-lead, .about-lead, .pre-footer-cta-desc, .process-intro, .careers-recruit-lead) {
  color: var(--ds-dark-body) !important;
  line-height: 1.8 !important;
}

:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) :is(li, .ent-check-list li, .ent-split-list li) {
  color: var(--ds-dark-list) !important;
}

:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) :is(strong, b) {
  color: var(--ds-dark-heading) !important;
}

/* Eyebrows / labels */
:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) :is(
  .eyebrow,
  .sd-eyebrow,
  .ent-eyebrow,
  .about-eyebrow,
  .about-kicker,
  .section-subtitle,
  .process-flow-eyebrow,
  .careers-block-label,
  .careers-recruit-eyebrow,
  .pre-footer-cta-badge
) {
  color: var(--ds-dark-eyebrow) !important;
}

:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) .text-muted {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Cards inside dark sections */
:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) :is(
  .sd-cap-card,
  .ent-svc-card,
  .ent-stack-card,
  .ent-metric,
  .ent-glass-form,
  .ent-job-card,
  .ent-benefit-card,
  .ent-quote-card,
  .about-diff-card,
  .process-flow-card,
  .careers-benefit-card,
  .careers-job-card,
  .ng-kpi-card
) {
  background: var(--ds-dark-card-bg) !important;
  border: 1px solid var(--ds-dark-card-border) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
}

:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) :is(
  .sd-cap-card h3,
  .sd-cap-card h4,
  .ent-svc-card h3,
  .ent-stack-card h4,
  .ent-metric strong,
  .about-diff-card h3,
  .process-flow-card-title,
  .careers-benefit-card h4,
  .careers-job-role,
  .ent-job-card h3,
  .card-title
) {
  color: var(--ds-dark-heading) !important;
}

:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) :is(
  .sd-cap-card p,
  .ent-svc-card p,
  .ent-stack-card p,
  .about-diff-card p,
  .process-flow-card-desc,
  .careers-benefit-card p,
  .ent-job-card p,
  .card-text,
  .ent-metric span
) {
  color: var(--ds-dark-body-muted) !important;
}

:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section
) :is(.sd-cap-card .more, .sd-cap-card .ico, .ent-svc-card .ico) {
  color: var(--ds-dark-eyebrow) !important;
}

/* Hero + footer — dark typography only (backgrounds stay page-specific) */
.hero-home,
.footer-custom {
  color: var(--ds-dark-body);
}

.hero-home :is(h1, h2, h3, .hero-heading, .section-title) {
  color: var(--ds-dark-heading) !important;
  -webkit-text-fill-color: unset !important;
}

.hero-home :is(p, .hero-desc) {
  color: var(--ds-dark-body) !important;
}

.hero-home :is(.hero-tag, .sd-eyebrow) {
  color: var(--ds-dark-eyebrow) !important;
}

/* ---------- Section spacing & light gradients ---------- */
.sd-section,
.ent-section,
.about-section,
.page-section {
  padding-top: var(--ng-section-y) !important;
  padding-bottom: var(--ng-section-y) !important;
}

@media (max-width: 767px) {
  .sd-section,
  .ent-section,
  .about-section,
  .page-section,
  section:not(.pre-footer-cta):not(.hero-home) {
    padding-top: var(--ng-section-y-mobile) !important;
    padding-bottom: var(--ng-section-y-mobile) !important;
  }
}

.sd-section--white,
.ent-section--white,
.about-section--white {
  background: var(--ng-white) !important;
}

.sd-section--mist,
.sd-section--frost,
.ent-section--mist,
.ent-section--soft,
.ent-section--frost,
.about-section--mist {
  position: relative;
  background:
    radial-gradient(rgba(47, 107, 255, 0.04) 1px, transparent 1px),
    radial-gradient(ellipse at 14% 0%, rgba(47, 107, 255, 0.05), transparent 46%),
    radial-gradient(ellipse at 86% 100%, rgba(110, 66, 255, 0.04), transparent 42%),
    var(--ng-gradient-section) !important;
  background-size: 26px 26px, auto, auto, auto !important;
}

.ent-section--mesh,
.about-section--mesh,
.sd-section--mesh {
  position: relative;
  background:
    radial-gradient(rgba(47, 107, 255, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse at 80% 12%, rgba(47, 107, 255, 0.06), transparent 44%),
    radial-gradient(ellipse at 12% 88%, rgba(6, 182, 212, 0.05), transparent 40%),
    var(--ng-gradient-section-alt) !important;
  background-size: 28px 28px, auto, auto, auto !important;
}

/* Convert legacy slate / dark inner sections → light gradient */
.ent-section--slate,
body.subpage .page-section--dark {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(47, 107, 255, 0.06), transparent 48%),
    var(--ng-gradient-section) !important;
  color: var(--ng-body) !important;
}

.ent-section--slate .ent-display,
.ent-section--slate .section-title,
body.subpage .page-section--dark h1,
body.subpage .page-section--dark h2,
body.subpage .page-section--dark h3,
body.subpage .page-section--dark h4 {
  color: var(--ng-heading) !important;
}

body.subpage .page-section--dark p,
.ent-section--slate p {
  color: var(--ng-body) !important;
}

/* ---------- Unified premium card (light backgrounds) ---------- */
.sd-stat-grid .sd-stat,
.sd-info-card,
.sd-tech-item,
.sd-accordion-item,
.sd-challenge-card,
.sd-metric-card,
.sd-model-card,
.sd-process-step,
.ent-svc-card,
.ent-case-card,
.ent-stack-card,
.ent-metric,
.ent-job-card,
.ent-glass-form,
.ent-benefit-card,
.ent-quote-card,
.service-card-premium,
.glass-card-premium,
.advantage-card-premium,
.page-stat,
.about-metric-card,
.about-glass-card,
.about-value-card {
  background: var(--ng-white) !important;
  border: 1px solid var(--ng-border) !important;
  box-shadow: var(--ng-shadow-card) !important;
  border-radius: var(--ng-radius) !important;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease !important;
}

/* Stats/charts on light mist sections only */
.sd-section--mist .sd-stat,
.sd-section--white .sd-stat,
.sd-section--frost .sd-stat,
.sd-section--mist .sd-chart,
.sd-section--white .sd-chart {
  background: var(--ng-white) !important;
  border: 1px solid var(--ng-border) !important;
  box-shadow: var(--ng-shadow-md) !important;
}

.sd-challenge-card:hover,
.sd-metric-card:hover,
.sd-model-card:hover,
.sd-info-card:hover,
.sd-tech-item:hover,
.sd-process-step:hover,
.sd-accordion-item.is-open,
.ent-svc-card:hover,
.ent-case-card:hover,
.ent-stack-card:hover,
.service-card-premium:hover,
.glass-card-premium:hover,
.advantage-card-premium:hover,
.ent-benefit-card:hover,
.about-metric-card:hover,
.about-value-card:hover {
  transform: translateY(var(--ng-card-lift));
  border-color: var(--ng-border-hover) !important;
  box-shadow: var(--ng-shadow-card-hover) !important;
}

/* Dark section card hovers */
:is(.dark-section, .sd-section--ink, .ent-section--ink) :is(.sd-cap-card:hover, .ent-svc-card:hover) {
  border-color: rgba(125, 211, 252, 0.35) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28), 0 0 32px rgba(47, 107, 255, 0.14) !important;
}

.hero-home .about-hero-stat {
  background: var(--ds-dark-card-bg) !important;
  border: 1px solid var(--ds-dark-card-border) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
}

/* Card typography on light surfaces */
.sd-challenge-card h3,
.sd-metric-card strong,
.ent-svc-card h3,
.ent-case-card h3,
.service-card-premium h3,
.service-card-premium h4,
.glass-card-premium h3,
.advantage-card-premium h3,
.advantage-card-premium h4 {
  color: var(--ng-heading) !important;
}

.sd-challenge-card p,
.ent-svc-card p,
.ent-case-card p,
.service-card-premium p,
.glass-card-premium p,
.advantage-card-premium p {
  color: var(--ng-body) !important;
}

.sd-metric-card strong,
.sd-info-card .val {
  color: var(--ng-label) !important;
}

/* Icon wells */
.sd-challenge-card .ico,
.ent-svc-card .ico,
.ent-svc-card .ent-svc-icon,
.service-icon-box {
  background: linear-gradient(145deg, rgba(47, 107, 255, 0.1), rgba(110, 66, 255, 0.08)) !important;
  color: var(--ng-label) !important;
}

/* Remove heavy gradient borders on light cards */
.ent-svc-card::before,
.service-card-premium::before,
#services-sec .glass-card-premium::before {
  opacity: 0 !important;
}

.ent-svc-card:hover::before,
.service-card-premium:hover::before {
  opacity: 0 !important;
}

/* Homepage section backgrounds — strict alternation rhythm */
#about,
#solutions-sec,
#industries-sec,
#advantage-sec,
#testimonials-sec {
  background: var(--ng-white) !important;
  color: var(--ng-body) !important;
}

#services-sec,
#case-studies-sec {
  background:
    radial-gradient(rgba(47, 107, 255, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse at 14% 0%, rgba(47, 107, 255, 0.05), transparent 46%),
    radial-gradient(ellipse at 86% 100%, rgba(110, 66, 255, 0.04), transparent 42%),
    var(--ng-gradient-section) !important;
  background-size: 26px 26px, auto, auto, auto !important;
  color: var(--ng-body) !important;
}

#about h2, #solutions-sec h2, #industries-sec h2,
#advantage-sec h2, #testimonials-sec h2,
#services-sec h2, #case-studies-sec h2 {
  color: var(--ng-heading) !important;
}

.hero-home {
  background-color: var(--ng-dark) !important;
}

/* Pre-footer — border only; surface from dark section system */
.pre-footer-cta {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pre-footer-cta-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Softer section dividers on light bands only */
.sd-section:not(.sd-section--ink):not(.dark-section)::before,
.ent-section:not(.ent-section--ink):not(.dark-section)::before,
.about-section:not(.about-section--ink):not(.dark-section)::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(230, 237, 248, 0.9) 20%,
    rgba(47, 107, 255, 0.14) 50%,
    rgba(230, 237, 248, 0.9) 80%,
    transparent
  ) !important;
}

@media (prefers-reduced-motion: reduce) {
  .sd-challenge-card,
  .ent-svc-card,
  .service-card-premium,
  .glass-card-premium {
    transition: none !important;
  }
}

/* ---------- Enterprise refinement: density, KPIs, layout variety ---------- */
.sd-section--compact,
.ent-section--compact,
.about-section--compact,
.page-section--compact {
  padding-top: var(--ng-section-y-compact) !important;
  padding-bottom: var(--ng-section-y-compact) !important;
}

.sd-section .row.mb-5,
.ent-section .row.mb-5,
.about-section .row.mb-5,
.page-section .row.mb-5 {
  margin-bottom: 2.25rem !important;
}

.sd-lead,
.ent-lead,
.about-lead {
  color: var(--ng-body) !important;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  max-width: 42rem;
}

/* Premium KPI cards */
.ng-kpi-card,
.ent-metric-row:not(.ent-metric-row--hero):not(.ent-metric-row--dark) > div,
.sd-section--mist .sd-stat,
.sd-section--white .sd-stat,
.sd-section--frost .sd-stat,
.about-metric-card,
.page-stat {
  position: relative;
  padding: 1.35rem 1.25rem !important;
  text-align: left !important;
  overflow: hidden;
}

.ng-kpi-card::before,
.ent-metric-row:not(.ent-metric-row--hero):not(.ent-metric-row--dark) > div::before,
.sd-section--mist .sd-stat::before,
.sd-section--white .sd-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2f6bff, #7c3aed);
  opacity: 0.85;
}

.ng-kpi-card strong,
.ng-kpi-card [data-count],
.ent-metric-row:not(.ent-metric-row--hero):not(.ent-metric-row--dark) > div > strong,
.ent-metric-row:not(.ent-metric-row--hero):not(.ent-metric-row--dark) > div > [data-count],
.sd-section--mist .sd-stat strong,
.sd-section--white .sd-stat strong,
.about-metric-card strong {
  font-family: var(--font-headings, 'Manrope', sans-serif) !important;
  font-size: clamp(2rem, 3.2vw, 2.65rem) !important;
  font-weight: 800 !important;
  color: var(--ng-heading) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin-bottom: 0.35rem !important;
}

.ng-kpi-card span,
.ent-metric-row:not(.ent-metric-row--hero):not(.ent-metric-row--dark) > div > span,
.sd-section--mist .sd-stat span,
.sd-section--white .sd-stat span,
.about-metric-card span {
  display: block;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--ng-body) !important;
  letter-spacing: 0.01em;
}

.ng-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.ng-kpi-row--inline {
  margin-bottom: 2rem;
}

@media (max-width: 991px) {
  .ng-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .ng-kpi-row {
    grid-template-columns: 1fr;
  }
}

/* Split image / text layouts */
.ent-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
}

.ent-split--reverse .ent-split-media {
  order: -1;
}

.ent-split-media {
  border-radius: var(--ng-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ng-border);
  box-shadow: var(--ng-shadow-lg);
  min-height: 280px;
}

.ent-split-media img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
}

.ent-split-content .ent-display {
  margin-bottom: 0.85rem;
}

@media (max-width: 991px) {
  .ent-split,
  .ent-split--reverse {
    grid-template-columns: 1fr;
  }

  .ent-split--reverse .ent-split-media {
    order: 0;
  }
}

/* Service-specific icon accent backgrounds */
body.page-svc-cloud .sd-challenge-card .ico,
body.page-svc-cloud .sd-cap-card .ico,
body.page-svc-cloud .sd-tech-item .ico {
  background: var(--ng-accent-cloud) !important;
  color: #2563eb !important;
}

body.page-svc-ai .sd-challenge-card .ico,
body.page-svc-ai .sd-cap-card .ico,
body.page-svc-ai .sd-tech-item .ico {
  background: var(--ng-accent-ai) !important;
  color: #7c3aed !important;
}

body.page-svc-cyber .sd-challenge-card .ico,
body.page-svc-cyber .sd-cap-card .ico,
body.page-svc-cyber .sd-tech-item .ico {
  background: var(--ng-accent-cyber) !important;
  color: #059669 !important;
}

body.page-svc-data .sd-challenge-card .ico,
body.page-svc-data .sd-cap-card .ico,
body.page-svc-data .sd-tech-item .ico {
  background: var(--ng-accent-analytics) !important;
  color: #d97706 !important;
}

/* Section separation — stronger dividers between bands */
.sd-section::before,
.ent-section::before,
.about-section::before {
  height: 1px !important;
  opacity: 1 !important;
}

.ent-section + .ent-section--white,
.ent-section--white + .ent-section--mist,
.ent-section--mist + .ent-section--white {
  border-top: 1px solid rgba(230, 237, 248, 0.85);
}

/* ========== FINAL PREMIUM POLISH ========== */

/* Prevent consecutive similar backgrounds */
.sd-section--mist + .sd-section--mist,
.sd-section--white + .sd-section--white,
.ent-section--mist + .ent-section--mist,
.ent-section--white + .ent-section--white {
  border-top: 1px solid rgba(230, 237, 248, 0.9);
}

/* Unified scroll reveal — IntersectionObserver only */
.reveal-fade-up,
.sub-reveal,
.ent-reveal,
.sd-reveal {
  transition:
    opacity var(--ng-reveal-duration) ease,
    transform var(--ng-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.reveal-fade-up:not(.is-in),
.sub-reveal:not(.is-in),
.ent-reveal:not(.is-in),
.sd-reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(var(--ng-reveal-y)) !important;
}

.reveal-fade-up.is-in,
.sub-reveal.is-in,
.ent-reveal.is-in,
.sd-reveal.is-in {
  opacity: 1;
  transform: none !important;
}

/* Meta / secondary text */
.text-muted,
.ent-case-industry,
.sd-eyebrow + .sd-lead,
.ent-job-meta span,
.page-header-desc {
  color: var(--ng-body-muted, #64748b) !important;
}

/* Premium image frames */
.ng-img-frame,
.sd-solve-media,
.ent-split-media,
.sd-case-media,
.ent-case-featured-media,
.ent-case-media {
  border-radius: var(--ng-radius) !important;
  overflow: hidden;
  box-shadow: var(--ng-shadow-card);
  border: 1px solid var(--ng-border);
}

.ng-img-frame img,
.sd-solve-media img,
.ent-split-media img,
.sd-case-media img,
.ent-case-featured-media img {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.ng-img-frame:hover img,
.sd-solve-media:hover img,
.ent-split-media:hover img,
.sd-case-media:hover img,
.ent-case-featured-media:hover img {
  transform: scale(1.03);
}

/* Glass badges & corner accents */
.ng-glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ng-label);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ng-border);
  backdrop-filter: blur(10px);
}

.ng-corner-accent {
  position: relative;
}

.ng-corner-accent::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 72px;
  background: radial-gradient(circle at 100% 0%, rgba(47, 107, 255, 0.12), transparent 70%);
  pointer-events: none;
  border-radius: 0 var(--ng-radius) 0 0;
}

/* Case study story blocks */
.ent-case-story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}

.ent-case-story-block {
  padding: 1.15rem 1.1rem;
  border-radius: 16px;
  background: var(--ng-white);
  border: 1px solid var(--ng-border);
  box-shadow: var(--ng-shadow-sm);
}

.ent-case-story-block .label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ng-label);
  margin-bottom: 0.45rem;
}

.ent-case-story-block p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ng-body);
}

@media (max-width: 767px) {
  .ent-case-story-grid {
    grid-template-columns: 1fr;
  }
}

/* Buttons — unified premium interaction */
.btn-premium {
  font-weight: 600 !important;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s ease,
    border-color 0.35s ease !important;
}

.btn-premium:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 36px rgba(47, 107, 255, 0.28) !important;
}

.btn-premium-outline {
  background: var(--ng-white) !important;
  border: 2px solid rgba(47, 107, 255, 0.35) !important;
  color: var(--ng-label) !important;
  box-shadow: var(--ng-shadow-sm) !important;
}

.btn-premium-outline:hover {
  background: var(--ng-white) !important;
  border-color: var(--ng-label) !important;
  color: var(--ng-label) !important;
  box-shadow: 0 12px 32px rgba(47, 107, 255, 0.14) !important;
}

.btn-premium-primary::before {
  display: none !important;
}

.btn-premium-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.btn-premium-primary:hover::after {
  transform: translateX(120%);
}

/* Homepage section padding alignment */
section:not(.pre-footer-cta):not(.hero-home) {
  padding-top: var(--ng-section-y) !important;
  padding-bottom: var(--ng-section-y) !important;
}

@media (max-width: 767px) {
  section:not(.pre-footer-cta):not(.hero-home) {
    padding-top: var(--ng-section-y-mobile) !important;
    padding-bottom: var(--ng-section-y-mobile) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-fade-up,
  .sub-reveal,
  .ent-reveal,
  .sd-reveal,
  .btn-premium,
  .ng-img-frame img,
  .sd-solve-media img {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Dark section buttons — must follow global .btn-premium-outline (!important) */
:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section,
  .hero-home
) .btn-premium-outline {
  background: var(--ds-dark-btn-secondary-bg) !important;
  border: 1px solid var(--ds-dark-btn-secondary-border) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:is(
  .dark-section,
  .section-dark,
  .sd-section--ink,
  .ent-section--ink,
  .about-section--ink,
  .sd-final-cta,
  .ent-section--cta,
  .pre-footer-cta,
  #tech-stack-sec,
  #process-sec,
  #careers-sec.careers-recruitment-section,
  .hero-home
) .btn-premium-outline:hover {
  background: var(--ds-dark-btn-secondary-hover-bg) !important;
  border-color: var(--ds-dark-btn-secondary-hover-bg) !important;
  color: var(--ds-dark-btn-secondary-hover-text) !important;
  box-shadow: 0 14px 36px rgba(255, 255, 255, 0.12) !important;
}