/* ============================================================
   CODEXPERIA — SERVICES SECTION
   services.css
   ============================================================ */

/* ============================================================
   SECTION WRAPPER
   ============================================================ */
.section-services {
  padding-top: var(--space-section);
  padding-bottom: 0;
  position: relative;
}

/* Section header */
.section-services .section-header h2 {
  font-size: clamp(1.875rem, 3.5vw, 3rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.025em;
  line-height: 1.1;
}


/* ============================================================
   SERVICE BLOCK — shared layout (Astra-proof)
   ============================================================ */
article.service-block,
.service-block {
  padding: var(--space-section) 0 !important;
  margin: 0 !important;
  position: relative;
  border-top: 1px solid var(--color-border-subtle);
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Alternating background tint */
article.service-block.service-block--alt,
.service-block--alt {
  background: rgba(7, 17, 31, 0.5) !important;
  background-color: rgba(7, 17, 31, 0.5) !important;
}

.service-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}

/* Alternate: visual first on desktop */
.service-block--alt .service-block__inner {
  /* visual is first child; text is second */
}

.service-block__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-block__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   SERVICE NUMBER
   ============================================================ */
.service-num {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: var(--weight-black);
  color: transparent;
  -webkit-text-stroke: 1px rgba(56, 189, 248, 0.1);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: var(--space-3);
  user-select: none;
  pointer-events: none;
}


/* ============================================================
   SERVICE HEADING
   ============================================================ */
.service-block__heading {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}


/* ============================================================
   SERVICE TAGLINE
   ============================================================ */
.service-block__tagline {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-6);
  letter-spacing: 0.005em;
}


/* ============================================================
   SERVICE BODY TEXT
   ============================================================ */
.service-block__body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 48ch;
}


/* ============================================================
   SERVICE PROCESS FLOW (coding)
   ============================================================ */
.service-flow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: rgba(56, 189, 248, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 80px;
}

.sf-step--success .sf-step__icon {
  color: var(--color-success);
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.06);
}

.sf-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.18);
  color: var(--color-primary);
  flex-shrink: 0;
}

.sf-step__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.3;
}

.sf-arrow {
  display: block;
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(56,189,248,0.4) 0%, rgba(56,189,248,0.2) 100%);
  position: relative;
  flex-shrink: 0;
  align-self: center;
  margin-bottom: 18px; /* align with icon center */
}

.sf-arrow::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  border: 3px solid transparent;
  border-left: 5px solid rgba(56, 189, 248, 0.4);
}


/* ============================================================
   SERVICE CAPABILITIES LIST
   ============================================================ */
.service-caps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-6);
}

.service-caps li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: var(--leading-snug);
}

.service-caps li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.6;
  flex-shrink: 0;
  margin-top: 5px;
}


/* ============================================================
   CODING VISUAL — clinical document card
   ============================================================ */
.coding-visual {
  width: 100%;
  max-width: 440px;
  perspective: 1000px;
}

.coding-doc {
  background: rgba(7, 17, 31, 0.95);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.06),
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(56, 189, 248, 0.04);
  transform: perspective(800px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.5s var(--ease-out);
}

.coding-doc:hover {
  transform: perspective(800px) rotateY(0deg) rotateX(0deg);
}

/* Document header bar */
.coding-doc__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: rgba(56, 189, 248, 0.04);
  border-bottom: 1px solid var(--color-border);
}

.coding-doc__dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.coding-doc__dot--1 { background: #f87171; }
.coding-doc__dot--2 { background: #fbbf24; }
.coding-doc__dot--3 { background: #34d399; }

.coding-doc__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wider);
  margin-left: var(--space-2);
}

/* Document body */
.coding-doc__body {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.code-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.code-line--label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  opacity: 0.7;
  padding-top: var(--space-3);
}

.code-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-bold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(56, 189, 248, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(56, 189, 248, 0.2);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
}

.code-tag--cpt {
  background: rgba(129, 140, 248, 0.1);
  color: var(--color-secondary);
  border-color: rgba(129, 140, 248, 0.2);
}

.code-tag--mod {
  background: rgba(251, 191, 36, 0.08);
  color: var(--color-warning);
  border-color: rgba(251, 191, 36, 0.2);
}

.code-val {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: 0.03em;
  min-width: 60px;
  flex-shrink: 0;
}

.code-desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.3;
  opacity: 0.8;
}

/* Document footer */
.coding-doc__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: rgba(52, 211, 153, 0.04);
  border-top: 1px solid rgba(52, 211, 153, 0.1);
}

.coding-doc__status {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.coding-doc__status--validated {
  background: rgba(52, 211, 153, 0.1);
  color: var(--color-success);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.coding-doc__status--ready {
  background: rgba(56, 189, 248, 0.08);
  color: var(--color-primary);
  border: 1px solid rgba(56, 189, 248, 0.15);
}

/* Subtle type-on animation for code values */
@media (prefers-reduced-motion: no-preference) {
  .code-val {
    overflow: hidden;
  }
}


/* ============================================================
   BILLING VISUAL — pipeline stages
   ============================================================ */
.billing-visual {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.billing-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8) var(--space-6);
  background: rgba(7, 17, 31, 0.9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(56,189,248,0.04);
  gap: 0;
  position: relative;
  overflow: hidden;
}

/* Subtle scanline */
.billing-pipeline::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.2), transparent);
}

.bp-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.bp-stage__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.18);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.bp-stage--success .bp-stage__icon {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--color-success);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.1);
}

.bp-stage__label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  text-align: center;
}

/* Connector between stages */
.bp-connector {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 16px;
  margin-bottom: 20px; /* visually align with icon center */
}

.bp-connector__line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(56, 189, 248, 0.2) 0%,
    rgba(56, 189, 248, 0.4) 50%,
    rgba(56, 189, 248, 0.2) 100%
  );
}

.bp-connector__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.5;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Animated dot flow along connectors */
@media (prefers-reduced-motion: no-preference) {
  .bp-connector__dot {
    animation: dot-flow 2s ease-in-out infinite;
  }

  .bp-connector:nth-child(4) .bp-connector__dot { animation-delay: 0.5s; }
  .bp-connector:nth-child(6) .bp-connector__dot { animation-delay: 1.0s; }
  .bp-connector:nth-child(8) .bp-connector__dot { animation-delay: 1.5s; }
  .bp-connector:nth-child(10) .bp-connector__dot { animation-delay: 2.0s; }

  @keyframes dot-flow {
    0%   { opacity: 0.3; transform: scale(0.8); }
    50%  { opacity: 0.9; transform: scale(1.2); }
    100% { opacity: 0.3; transform: scale(0.8); }
  }
}

/* Chips row */
.billing-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.bc-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(56, 189, 248, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.12);
  color: var(--color-text-tertiary);
  transition: var(--transition-base);
}

.bc-chip--active {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.3);
  color: var(--color-primary);
}

.bc-chip--success {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.25);
  color: var(--color-success);
}


/* ============================================================
   AR WORKFLOW STEPS
   ============================================================ */
.ar-workflow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-8);
}

.arw-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(56, 189, 248, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: var(--transition-base);
}

.arw-step:hover {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.25);
}

.arw-step--final {
  background: rgba(52, 211, 153, 0.05);
  border-color: rgba(52, 211, 153, 0.2);
}

.arw-step--final:hover {
  background: rgba(52, 211, 153, 0.1);
}

.arw-num {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

.arw-step--final .arw-num {
  color: var(--color-success);
}

.arw-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}


/* ============================================================
   AR AGING VISUAL — horizontal bar chart
   ============================================================ */
.ar-aging-visual {
  width: 100%;
  max-width: 480px;
  background: rgba(7, 17, 31, 0.9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-8);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.ar-aging__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ar-aging__bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ar-bar {
  display: grid;
  grid-template-columns: 95px 1fr 75px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-1) 0;
}

.ar-bar__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.ar-bar__track {
  height: 7px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-full);
  overflow: hidden;
  flex: 1;
}

.ar-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  width: 0%; /* animated by JS */
  transition: width 1.2s var(--ease-out);
}

/* Aging bar colors — green → red spectrum */
.ar-bar__fill--green  { background: linear-gradient(90deg, #34d399, #6ee7b7); width: 88%; }
.ar-bar__fill--blue   { background: linear-gradient(90deg, #38bdf8, #7dd3fc); width: 72%; }
.ar-bar__fill--yellow { background: linear-gradient(90deg, #fbbf24, #fde68a); width: 54%; }
.ar-bar__fill--orange { background: linear-gradient(90deg, #f97316, #fdba74); width: 36%; }
.ar-bar__fill--red    { background: linear-gradient(90deg, #f87171, #fca5a5); width: 20%; }

/* Before scroll-reveal, bars start at 0 */
.ar-bar__fill.not-animated {
  width: 0% !important;
}

.ar-bar__tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  text-align: center;
  white-space: nowrap;
}

.ar-bar__tag--green  { background: rgba(52, 211, 153, 0.1); color: #34d399; border: 1px solid rgba(52,211,153,0.2); }
.ar-bar__tag--blue   { background: rgba(56, 189, 248, 0.1); color: #38bdf8; border: 1px solid rgba(56,189,248,0.2); }
.ar-bar__tag--yellow { background: rgba(251,191,36,0.1);    color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
.ar-bar__tag--orange { background: rgba(249,115,22,0.1);    color: #f97316; border: 1px solid rgba(249,115,22,0.2); }
.ar-bar__tag--red    { background: rgba(248,113,113,0.1);   color: #f87171; border: 1px solid rgba(248,113,113,0.2); }

/* Legend note */
.ar-aging__legend {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.ar-legend-note {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
  opacity: 0.7;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .service-block__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  /* On tablet, always show text first */
  .service-block--alt .service-block__inner .service-block__visual {
    order: -1;
  }

  .coding-doc,
  .billing-visual,
  .ar-aging-visual {
    max-width: 100%;
  }

  .coding-doc {
    transform: none;
  }
}

@media (max-width: 768px) {
  .service-block {
    padding: var(--space-12) 0;
  }

  .service-block__heading {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .service-num {
    font-size: clamp(3rem, 15vw, 5rem);
  }

  .service-caps {
    grid-template-columns: 1fr;
  }

  .ar-bar {
    grid-template-columns: 80px 1fr 60px;
  }

  .service-flow {
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
  }

  .sf-step {
    min-width: 60px;
  }

  .sf-step__label {
    font-size: 8px;
  }

  .billing-pipeline {
    padding: var(--space-5) var(--space-4);
    gap: 0;
    overflow-x: auto;
  }

  .bp-stage__icon {
    width: 40px;
    height: 40px;
  }
}