/* ============================================================
   SERVICES PAGE — VisionForge Technologies
   Prefix: sv-  (hero)
   ============================================================ */

/* ─────────────────────────────────────────────
   SECTION 1 — SERVICES HERO
   Prefix: sv-
───────────────────────────────────────────── */

.sv-hero {
  position: relative;
  padding-top: calc(var(--header-height) + var(--header-top-offset) + var(--space-10));
  padding-bottom: var(--space-10);
  overflow: hidden;
}

/* Hairline top separator */
.sv-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * clamp(1rem, 5vw, 5rem));
  max-width: var(--container-max);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 30%,
    rgba(255, 255, 255, 0.07) 70%,
    transparent 100%
  );
}

/* ── Background ── */
.sv-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.sv-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.sv-glow--tl {
  width: 680px;
  height: 680px;
  top: -200px;
  left: -180px;
  background: radial-gradient(circle, rgba(27, 142, 248, 0.09) 0%, transparent 65%);
}

.sv-glow--br {
  width: 520px;
  height: 520px;
  bottom: -160px;
  right: -140px;
  background: radial-gradient(circle, rgba(27, 142, 248, 0.06) 0%, transparent 65%);
}

/* Subtle dot-grid texture */
.sv-hero__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(0, 0, 0, 0.6) 0%, transparent 80%);
}

/* ── Container: 55/45 grid ── */
.sv-hero__container {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--space-12);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────
   LEFT COLUMN: CONTENT
───────────────────────────────────────────── */

.sv-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* Badge */
.sv-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  background: var(--color-brand-faint);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.sv-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  box-shadow: 0 0 0 2px rgba(27, 142, 248, 0.25);
  animation: sv-dot-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes sv-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(27, 142, 248, 0.25); }
  50%       { box-shadow: 0 0 0 4px rgba(27, 142, 248, 0.10); }
}

/* Heading */
.sv-hero__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  text-wrap: balance;
}

.sv-hero__heading-accent {
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Description */
.sv-hero__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 480px;
  margin-bottom: var(--space-3);
}

/* CTA actions */
.sv-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   RIGHT COLUMN: CSS ILLUSTRATION
   Represents: Web App, Analytics Dashboard (main card)
   Mobile App (device), Cloud, API, UI/UX (floating chips)
───────────────────────────────────────────── */

.sv-hero__visual {
  position: relative;
  height: 400px;
}

/* Ambient glow behind the card */
.svv-bg-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(27, 142, 248, 0.14) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ── Main: Browser / Dashboard Card (Web App + Analytics) ── */
.svv-browser-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  background: rgba(13, 24, 41, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.50),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2;
  animation: svv-card-float 6s ease-in-out infinite;
}

@keyframes svv-card-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
  50%       { transform: translate(-50%, -50%) translateY(-8px); }
}

.svv-browser-card__topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.02);
}

.svv-browser-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dc, rgba(255, 255, 255, 0.2));
  opacity: 0.85;
  flex-shrink: 0;
}

.svv-browser-card__url {
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.045);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.01em;
}

.svv-browser-card__body {
  padding: 16px 16px 18px;
}

.svv-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.svv-dash-title {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.svv-dash-live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: rgba(34, 197, 94, 0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.svv-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22C55E;
  animation: svv-live-ping 1.8s ease-in-out infinite;
}

@keyframes svv-live-ping {
  0%, 100% { box-shadow: 0 0 0 0px rgba(34, 197, 94, 0.4); }
  50%       { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.0); }
}

.svv-dash-stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  margin-bottom: 14px;
}

.svv-dash-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.svv-dash-stat__val {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-extrabold);
  color: var(--color-text-primary);
  line-height: 1;
}

.svv-dash-stat__lbl {
  font-size: 10px;
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.02em;
}

.svv-dash-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 64px;
  padding: 0 2px;
}

.svv-bar {
  flex: 1;
  height: var(--h, 40%);
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px 3px 0 0;
}

.svv-bar--accent {
  background: var(--gradient-brand);
}

/* ── Floating: Mobile Device (Mobile App) ── */
.svv-mobile-device {
  position: absolute;
  bottom: -18px;
  left: -20px;
  width: 96px;
  height: 176px;
  background: rgba(13, 24, 41, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  padding: 10px 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 3;
  animation: svv-mobile-float 6.5s ease-in-out infinite;
}

@keyframes svv-mobile-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

.svv-mobile-device__notch {
  width: 28px;
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14);
  margin: 0 auto 10px;
}

.svv-mobile-device__screen {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.svv-mobile-card {
  height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(27,142,248,0.28) 0%, rgba(14,114,212,0.12) 100%);
  border: 1px solid rgba(27, 142, 248, 0.22);
}

.svv-mobile-line {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.10);
}

.svv-mobile-line--1 { width: 100%; }
.svv-mobile-line--2 { width: 65%; }

.svv-mobile-btn {
  margin-top: 4px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--gradient-brand);
}

/* ── Floating tech/service chips ── */
.svv-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(13, 24, 41, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 4;
}

.svv-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-light);
  flex-shrink: 0;
}

.svv-chip--cloud {
  top: 20px;
  right: -12px;
  animation: svv-chip1-float 5.5s ease-in-out infinite;
}

@keyframes svv-chip1-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.svv-chip--api {
  bottom: 40px;
  right: -18px;
  animation: svv-chip2-float 6s ease-in-out infinite;
}

@keyframes svv-chip2-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.svv-chip--design {
  /* Was 118px, which landed inside the browser card's topbar (card
     starts ~125px down within .sv-hero__visual) — 40px keeps it
     floating clear above the card, matching the other two chips. */
  top: 40px;
  left: 100px;
  animation: svv-chip3-float 4.8s ease-in-out infinite;
}

@keyframes svv-chip3-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}

/* ─────────────────────────────────────────────
   HERO RESPONSIVE
───────────────────────────────────────────── */

/* xs: ≤ 479px */
@media (max-width: 479px) {

  .sv-hero {
    padding-top: calc(var(--header-height) + var(--header-top-offset) + var(--space-4));
    padding-bottom: var(--space-10);
  }

  .sv-hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    min-height: auto;
  }

  .sv-hero__heading {
    font-size: var(--text-3xl);
  }

  .sv-hero__desc {
    font-size: var(--text-base);
    max-width: 100%;
  }

  .sv-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1-5);
  }

  .sv-hero__visual {
    display: none;
  }
}

/* sm: 480px – 767px */
@media (min-width: 480px) and (max-width: 767px) {

  .sv-hero {
    padding-top: calc(var(--header-height) + var(--header-top-offset) + var(--space-6));
    padding-bottom: var(--space-10);
  }

  .sv-hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    min-height: auto;
  }

  .sv-hero__heading {
    font-size: var(--text-4xl);
  }

  .sv-hero__desc {
    max-width: 100%;
  }

  .sv-hero__visual {
    display: none;
  }
}

/* md: 768px – 1023px */
@media (min-width: 768px) and (max-width: 1023px) {

  .sv-hero {
    padding-top: calc(var(--header-height) + var(--header-top-offset) + var(--space-8));
    padding-bottom: var(--space-12);
  }

  .sv-hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    min-height: auto;
  }

  .sv-hero__content {
    align-items: center;
    text-align: center;
  }

  .sv-hero__desc {
    max-width: 540px;
  }

  .sv-hero__actions {
    justify-content: center;
  }

  /* Show a simplified version of the visual on tablet */
  .sv-hero__visual {
    height: 340px;
    max-width: 480px;
    margin: 0 auto;
  }

  .svv-mobile-device {
    left: 8px;
  }

  .svv-chip--design {
    left: 120px;
  }
}

/* lg: 1024px – 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {

  .sv-hero__container {
    gap: var(--space-8);
  }

  .sv-hero__heading {
    font-size: var(--text-4xl);
  }

  .svv-browser-card {
    width: 340px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .svv-browser-card,
  .svv-mobile-device,
  .svv-chip--cloud,
  .svv-chip--api,
  .svv-chip--design,
  .sv-hero__badge-dot,
  .svv-live-dot {
    animation: none;
  }
}

/* ─────────────────────────────────────────────
   SECTION 2 — SERVICES GRID
   Prefix: sg-
   Cards reuse the global .service-card component
   (style.css) and .services__grid layout — same
   card style/spacing/breakpoints as the Homepage.
───────────────────────────────────────────── */

.sg-section {
  position: relative;
  padding-block: var(--space-12) var(--space-16);
  overflow: hidden;
}

/* Hairline top separator */
.sg-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * clamp(1rem, 5vw, 5rem));
  max-width: var(--container-max);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 30%,
    rgba(255, 255, 255, 0.07) 70%,
    transparent 100%
  );
}

/* Background glow */
.sg-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.sg-section__glow {
  position: absolute;
  width: 620px;
  height: 420px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -30%);
  background: radial-gradient(ellipse, rgba(27, 142, 248, 0.07) 0%, transparent 70%);
}

/* Section header */
.sg-section__header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--space-8);
  position: relative;
  z-index: 1;
}

.sg-section__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.sg-section__label-line {
  width: 24px;
  height: 1.5px;
  background: var(--color-brand-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.sg-section__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.sg-section__heading-accent {
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sg-section__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ── Card footer: "Learn More" link (replaces the
     homepage's benefit-tag footer for this page) ── */
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition: color var(--duration-moderate) var(--ease-out);
}

.service-card__link:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 3px;
}

.service-card:hover .service-card__link,
.service-card__link:hover {
  color: var(--color-brand-light);
}

.service-card__link-arrow {
  flex-shrink: 0;
  transition: transform var(--duration-moderate) var(--ease-out);
}

.service-card:hover .service-card__link-arrow,
.service-card__link:hover .service-card__link-arrow {
  transform: translateX(4px);
}

/* ─────────────────────────────────────────────
   SERVICES GRID RESPONSIVE
───────────────────────────────────────────── */

@media (max-width: 479px) {
  .sg-section {
    padding-block: var(--space-10) var(--space-12);
  }

  .sg-section__heading {
    font-size: var(--text-3xl);
  }

  .sg-section__header {
    margin-bottom: var(--space-6);
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .sg-section {
    padding-block: var(--space-10) var(--space-14);
  }

  .sg-section__heading {
    font-size: var(--text-3xl);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sg-section__heading {
    font-size: var(--text-4xl);
  }
}

/* ─────────────────────────────────────────────
   SECTION 3 — WHY CHOOSE VISIONFORGE
   Prefix: wcv-
───────────────────────────────────────────── */

.wcv-section {
  position: relative;
  padding-block: var(--space-12) var(--space-16);
  overflow: hidden;
}

/* Hairline top separator */
.wcv-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * clamp(1rem, 5vw, 5rem));
  max-width: var(--container-max);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 30%,
    rgba(255, 255, 255, 0.07) 70%,
    transparent 100%
  );
}

/* Background glow */
.wcv-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.wcv-section__glow {
  position: absolute;
  width: 620px;
  height: 420px;
  top: 10%;
  right: -180px;
  background: radial-gradient(ellipse, rgba(27, 142, 248, 0.07) 0%, transparent 70%);
}

/* Section header */
.wcv-section__header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--space-10);
  position: relative;
  z-index: 1;
}

.wcv-section__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.wcv-section__label-line {
  width: 24px;
  height: 1.5px;
  background: var(--color-brand-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.wcv-section__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.wcv-section__heading-accent {
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wcv-section__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ── Two-column layout ── */
.wcv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────
   LEFT: PROCESS ILLUSTRATION
   (Team → Design → Development → Testing → Launch)
───────────────────────────────────────────── */

.wcv-visual {
  position: relative;
  height: 480px;
}

.wcv-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(27, 142, 248, 0.13) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Main: workflow card */
.wcv-stack-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  background: rgba(13, 24, 41, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.50),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2;
  animation: wcv-card-float 6s ease-in-out infinite;
}

@keyframes wcv-card-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
  50%       { transform: translate(-50%, -50%) translateY(-8px); }
}

.wcv-stack-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.wcv-stack-card__title {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.wcv-stack-card__badge {
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  background: var(--color-brand-faint);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-full);
  padding: 3px 9px;
  letter-spacing: 0.02em;
}

.wcv-stack-card__body {
  display: flex;
  flex-direction: column;
  padding: 12px 16px 16px;
}

/* Stage row */
.wcv-stage {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
}

.wcv-stage__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.26);
  color: #22C55E;
}

.wcv-stage--active .wcv-stage__icon {
  background: rgba(27, 142, 248, 0.14);
  border: 1px solid rgba(27, 142, 248, 0.32);
  color: var(--color-brand-light);
}

.wcv-stage__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wcv-stage__name {
  font-size: 12px;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

.wcv-stage__status {
  font-size: 10px;
  font-weight: var(--font-medium);
  color: rgba(34, 197, 94, 0.80);
  letter-spacing: 0.02em;
}

.wcv-stage__status--active {
  color: var(--color-brand-light);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wcv-stage__status--active::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  animation: wcv-status-pulse 1.8s ease-in-out infinite;
}

@keyframes wcv-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0px rgba(27, 142, 248, 0.35); }
  50%       { box-shadow: 0 0 0 3px rgba(27, 142, 248, 0.0); }
}

.wcv-stage__line {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  margin-left: 15px;
}

/* Floating: Team chip (top-right) */
.wcv-team-chip {
  position: absolute;
  top: 16px;
  right: -14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  background: rgba(13, 24, 41, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-full);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 3;
  animation: wcv-chip1-float 5.5s ease-in-out infinite;
}

@keyframes wcv-chip1-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

.wcv-team-chip__avatars {
  display: flex;
  flex-shrink: 0;
}

.wcv-team-chip__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(13, 24, 41, 0.95);
  background: var(--gradient-brand);
  margin-left: -8px;
}

.wcv-team-chip__avatar:first-child {
  margin-left: 0;
}

.wcv-team-chip__label {
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

/* Floating: Launch-ready chip (bottom-left) */
.wcv-launch-chip {
  position: absolute;
  /* Was 30px, which put the chip's top edge inside the "Launch / In
     Progress" row (the card's last stage) — 6px keeps the same
     peeking-below-the-card look while clearing the text. */
  bottom: 6px;
  left: -18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(13, 24, 41, 0.90);
  border: 1px solid rgba(27, 142, 248, 0.26);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 3;
  animation: wcv-chip2-float 6.5s ease-in-out infinite;
}

@keyframes wcv-chip2-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.wcv-launch-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(27, 142, 248, 0.15);
  border: 1px solid rgba(27, 142, 248, 0.32);
  color: var(--color-brand-light);
  flex-shrink: 0;
}

.wcv-launch-chip__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wcv-launch-chip__title {
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

.wcv-launch-chip__sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────
   RIGHT: VALUE LIST
   Lighter than the Services Grid — no card
   backgrounds, only icon + text + hairline dividers.
───────────────────────────────────────────── */

.wcv-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wcv-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: padding-left var(--duration-moderate) var(--ease-out);
}

.wcv-item:first-child {
  padding-top: 0;
}

.wcv-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wcv-item:hover {
  padding-left: var(--space-1);
}

.wcv-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--color-brand-faint);
  border: 1px solid rgba(27, 142, 248, 0.14);
  border-radius: var(--radius-lg);
  color: var(--color-brand-primary);
  transition:
    background   var(--duration-moderate) var(--ease-out),
    border-color var(--duration-moderate) var(--ease-out),
    transform    var(--duration-moderate) var(--ease-bounce);
}

.wcv-item:hover .wcv-item__icon {
  background: rgba(27, 142, 248, 0.12);
  border-color: rgba(27, 142, 248, 0.30);
  transform: scale(1.06);
}

.wcv-item__body {
  flex: 1;
  padding-top: 3px;
}

.wcv-item__title {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: 0 0 4px;
}

.wcv-item__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

.wcv-item__link {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-brand-light);
  text-decoration: none;
}

.wcv-item__link:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────
   WHY CHOOSE VISIONFORGE — RESPONSIVE
───────────────────────────────────────────── */

@media (max-width: 479px) {
  .wcv-section {
    padding-block: var(--space-10) var(--space-12);
  }

  .wcv-section__header {
    margin-bottom: var(--space-8);
  }

  .wcv-section__heading {
    font-size: var(--text-3xl);
  }

  .wcv-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .wcv-visual {
    height: 300px;
  }

  .wcv-stack-card {
    width: 280px;
  }

  .wcv-team-chip,
  .wcv-launch-chip {
    display: none;
  }

  .wcv-item {
    gap: var(--space-2);
  }

  .wcv-item__icon {
    width: 38px;
    height: 38px;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .wcv-section {
    padding-block: var(--space-10) var(--space-14);
  }

  .wcv-section__heading {
    font-size: var(--text-3xl);
  }

  .wcv-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .wcv-visual {
    height: 380px;
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .wcv-section__heading {
    font-size: var(--text-4xl);
  }

  .wcv-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .wcv-visual {
    height: 400px;
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .wcv-grid {
    gap: var(--space-8);
  }

  .wcv-stack-card {
    width: 320px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wcv-stack-card,
  .wcv-team-chip,
  .wcv-launch-chip,
  .wcv-stage__status--active::before {
    animation: none;
  }
}

/* ─────────────────────────────────────────────
   SECTION 4 — OUR DEVELOPMENT PROCESS
   Prefix: dp-
───────────────────────────────────────────── */

.dp-section {
  position: relative;
  padding-block: var(--space-12) var(--space-16);
  overflow: hidden;
}

/* Hairline top separator */
.dp-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * clamp(1rem, 5vw, 5rem));
  max-width: var(--container-max);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 30%,
    rgba(255, 255, 255, 0.07) 70%,
    transparent 100%
  );
}

/* Background glow */
.dp-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.dp-section__glow {
  position: absolute;
  width: 600px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(27, 142, 248, 0.07) 0%, transparent 70%);
}

/* Section header */
.dp-section__header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--space-12);
  position: relative;
  z-index: 1;
}

.dp-section__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.dp-section__label-line {
  width: 24px;
  height: 1.5px;
  background: var(--color-brand-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.dp-section__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.dp-section__heading-accent {
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dp-section__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ── Process track (6 connected steps) ── */
.dp-process {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: flex-start;
  margin-bottom: var(--space-10);
}

/* Connector line */
.dp-connector {
  position: absolute;
  /* top = step-num height (18px) + gap (6px) + half icon (22px) = 46px */
  top: 46px;
  /* left/right = half a step width = 1/(2*6) of container = ~8.33% */
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 1.5px;
  background: rgba(255, 255, 255, 0.07);
  z-index: 0;
}

.dp-connector__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-brand-primary) 0%,
    var(--color-brand-light) 50%,
    var(--color-brand-dark) 100%
  );
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.dp-connector__fill.is-drawn {
  transform: scaleX(1);
}

/* Individual step */
.dp-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-1);
  position: relative;
  z-index: 1;
}

.dp-step__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.dp-step__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-brand-primary);
  opacity: 0.65;
  letter-spacing: 0.06em;
  height: 18px;
  line-height: 18px;
}

/* Step icon circle */
.dp-step__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-surface);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.50);
  position: relative;
  z-index: 1;
  transition:
    background 240ms ease,
    border-color 240ms ease,
    color 240ms ease,
    box-shadow 240ms ease,
    transform 240ms ease;
}

.dp-step:hover .dp-step__icon {
  background:
    linear-gradient(rgba(27, 142, 248, 0.12), rgba(27, 142, 248, 0.12)),
    var(--color-bg-surface);
  border-color: rgba(27, 142, 248, 0.40);
  color: var(--color-brand-light);
  box-shadow: 0 0 18px rgba(27, 142, 248, 0.22);
  transform: translateY(-2px);
}

.dp-step__title {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-bottom: 6px;
}

.dp-step__desc {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  /* rgba(255,255,255,0.62), not --color-text-tertiary (0.45) — 0.45 fails WCAG AA
     4.5:1 at this font size; bumped locally rather than raising the shared
     variable, to avoid changing contrast elsewhere. */
  color: rgba(255, 255, 255, 0.62);
  max-width: 130px;
}

.dp-step__time {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-brand-light);
}

.dp-step__link {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-brand-light);
  text-decoration: none;
}

.dp-step__link:hover {
  text-decoration: underline;
}

/* Override reveal transform — steps must stay at their layout position
   so the connector line always passes through the icon centers */
.dp-step.reveal {
  transform: none;
}

.dp-step.reveal.is-visible {
  transform: none;
}

/* ── Methodology highlight panel ── */
.dp-methodology {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, rgba(27, 142, 248, 0.08) 0%, rgba(14, 114, 212, 0.02) 100%);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.dp-methodology::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-brand);
}

.dp-methodology__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--color-brand-faint);
  border: 1px solid rgba(27, 142, 248, 0.22);
  border-radius: var(--radius-lg);
  color: var(--color-brand-light);
}

.dp-methodology__body {
  flex: 1;
  min-width: 0;
}

.dp-methodology__title {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin: 0 0 4px;
}

.dp-methodology__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 640px;
}

.dp-methodology__tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.dp-methodology__tag {
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  background: rgba(27, 142, 248, 0.10);
  border: 1px solid rgba(27, 142, 248, 0.22);
  border-radius: var(--radius-full);
  padding: 4px 11px;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   DEVELOPMENT PROCESS — RESPONSIVE
───────────────────────────────────────────── */

/* xs: ≤ 479px */
@media (max-width: 479px) {

  .dp-section {
    padding-block: var(--space-10) var(--space-12);
  }

  .dp-section__header {
    margin-bottom: var(--space-8);
  }

  .dp-section__heading {
    font-size: var(--text-3xl);
  }

  /* Vertical stack on mobile */
  .dp-process {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: var(--space-8);
  }

  .dp-connector {
    display: none;
  }

  /* Title/desc/time/link are separate flex siblings of .dp-step, not a
     grouped sub-block — a plain flex-direction:row here put all four in
     one horizontal row (title running directly into the description
     with no line break). A grid with the icon spanning every row hit a
     different problem: grid track sizing stretched the title's own row
     to match the (taller) icon column, opening a large gap before the
     description. Simplest robust fix: don't touch .dp-step's display at
     all (it stays a plain block, so title/desc/time/link — all
     block-level elements — stack in normal flow with their own natural
     margins) and instead pull the icon out of flow entirely with
     position:absolute, indenting the text column to clear it. */
  .dp-step {
    align-items: flex-start;
    text-align: left;
    padding: 0 0 var(--space-5) 56px;
    width: 100%;
    position: relative;
  }

  /* Vertical connector between mobile steps */
  .dp-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 68px;
    left: 22px;
    width: 1.5px;
    height: calc(100% - 68px + 16px);
    background: linear-gradient(to bottom, rgba(27, 142, 248, 0.35), rgba(27, 142, 248, 0.06));
  }

  .dp-step__node {
    position: absolute;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 0;
    margin-right: 0;
  }

  .dp-step__title,
  .dp-step__desc,
  .dp-step__time,
  .dp-step__link {
    max-width: 100%;
  }

  .dp-methodology {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .dp-methodology__tags {
    flex-direction: row;
  }
}

/* sm: 480px – 767px */
@media (min-width: 480px) and (max-width: 767px) {

  .dp-section {
    padding-block: var(--space-10) var(--space-14);
  }

  .dp-section__heading {
    font-size: var(--text-3xl);
  }

  .dp-process {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: var(--space-10);
  }

  .dp-connector {
    display: none;
  }

  .dp-step {
    align-items: flex-start;
    text-align: left;
    padding: 0 0 var(--space-5) 56px;
    width: 100%;
    position: relative;
  }

  .dp-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 68px;
    left: 22px;
    width: 1.5px;
    height: calc(100% - 68px + 16px);
    background: linear-gradient(to bottom, rgba(27, 142, 248, 0.35), rgba(27, 142, 248, 0.06));
  }

  .dp-step__node {
    position: absolute;
    top: 0;
    left: 0;
    flex-shrink: 0;
    margin-bottom: 0;
    margin-right: 0;
  }

  .dp-step__title,
  .dp-step__desc,
  .dp-step__time,
  .dp-step__link {
    max-width: 100%;
  }

  .dp-methodology {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .dp-methodology__tags {
    flex-direction: row;
  }
}

/* md: 768px – 1023px */
@media (min-width: 768px) and (max-width: 1023px) {

  .dp-section {
    padding-block: var(--space-10) var(--space-12);
  }

  .dp-section__header {
    margin-bottom: var(--space-10);
  }

  /* Wrap to 2 rows of 3 on tablet */
  .dp-process {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6) 0;
  }

  .dp-step {
    flex: 0 0 33.333%;
  }

  .dp-connector {
    display: none;
  }

  .dp-methodology {
    align-items: flex-start;
  }

  .dp-methodology__tags {
    flex-direction: column;
  }
}

/* lg: 1024px – 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {

  .dp-section {
    padding-block: var(--space-10) var(--space-12);
  }

  .dp-step__desc {
    font-size: 11px;
    max-width: 118px;
  }

  .dp-step__title {
    font-size: var(--text-xs);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dp-connector__fill {
    transition: none;
  }
}

/* ─────────────────────────────────────────────
   SECTION 5 — ENGAGEMENT MODELS & PROJECT TYPES
   Prefix: em-
───────────────────────────────────────────── */

.em-section {
  position: relative;
  padding-block: var(--space-12) var(--space-16);
  overflow: hidden;
}

/* Hairline top separator */
.em-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * clamp(1rem, 5vw, 5rem));
  max-width: var(--container-max);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 30%,
    rgba(255, 255, 255, 0.07) 70%,
    transparent 100%
  );
}

/* Background glow */
.em-section__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.em-section__glow {
  position: absolute;
  width: 600px;
  height: 420px;
  top: 15%;
  left: -160px;
  background: radial-gradient(ellipse, rgba(27, 142, 248, 0.07) 0%, transparent 70%);
}

/* Section header */
.em-section__header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--space-10);
  position: relative;
  z-index: 1;
}

.em-section__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.em-section__label-line {
  width: 24px;
  height: 1.5px;
  background: var(--color-brand-primary);
  border-radius: 1px;
  flex-shrink: 0;
}

.em-section__heading {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.em-section__heading-accent {
  background: var(--gradient-text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.em-section__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ── Two-column layout ── */
.em-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────
   LEFT: PROJECT-TYPE BLOCKS
   Elegant list — no card backgrounds, only
   icon + number + title + desc + hairline divider.
───────────────────────────────────────────── */

.em-blocks {
  display: flex;
  flex-direction: column;
}

.em-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: padding-left var(--duration-moderate) var(--ease-out);
}

.em-block:first-child {
  padding-top: 0;
}

.em-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.em-block:hover {
  padding-left: var(--space-1);
}

.em-block__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--color-brand-faint);
  border: 1px solid rgba(27, 142, 248, 0.14);
  border-radius: var(--radius-lg);
  color: var(--color-brand-primary);
  transition:
    background   var(--duration-moderate) var(--ease-out),
    border-color var(--duration-moderate) var(--ease-out),
    transform    var(--duration-moderate) var(--ease-bounce);
}

.em-block:hover .em-block__icon {
  background: rgba(27, 142, 248, 0.12);
  border-color: rgba(27, 142, 248, 0.30);
  transform: scale(1.06);
}

.em-block__body {
  flex: 1;
  padding-top: 2px;
}

.em-block__num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-brand-primary);
  /* opacity 0.9, not 0.65 — 0.65 fails WCAG AA 4.5:1 at this font size */
  opacity: 0.9;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.em-block__title {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin: 0 0 4px;
}

.em-block__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

.em-block__link {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-brand-light);
  text-decoration: none;
}

.em-block__link:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────
   RIGHT: PRODUCT JOURNEY INFOGRAPHIC
   Idea → Planning → Development → Launch → Growth
───────────────────────────────────────────── */

.em-visual {
  position: relative;
}

.em-visual__glow {
  position: absolute;
  width: 320px;
  height: 320px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(27, 142, 248, 0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.em-pipeline-card {
  position: relative;
  z-index: 1;
  background: rgba(13, 24, 41, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-2xl);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--space-5);
}

.em-pipeline-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.em-pipeline-card__title {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.em-pipeline-card__badge {
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: var(--color-brand-light);
  background: var(--color-brand-faint);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-full);
  padding: 3px 9px;
  letter-spacing: 0.02em;
}

/* Vertical pipeline of nodes */
.em-pipeline {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Continuous connecting line through icon centers */
.em-pipeline::before {
  content: '';
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 21px;
  width: 1.5px;
  background: linear-gradient(
    to bottom,
    var(--color-brand-primary) 0%,
    rgba(27, 142, 248, 0.15) 80%,
    transparent 100%
  );
}

.em-node {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: 11px;
  position: relative;
  z-index: 1;
}

.em-node__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-bg-surface);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.55);
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
}

/* Final node (Growth) highlighted as the destination milestone */
.em-node--highlight .em-node__icon {
  background: linear-gradient(rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.14)), var(--color-bg-surface);
  border-color: rgba(34, 197, 94, 0.40);
  color: #22C55E;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.18);
}

.em-node:hover .em-node__icon {
  background: linear-gradient(rgba(27, 142, 248, 0.12), rgba(27, 142, 248, 0.12)), var(--color-bg-surface);
  border-color: rgba(27, 142, 248, 0.40);
  color: var(--color-brand-light);
  box-shadow: 0 0 18px rgba(27, 142, 248, 0.20);
}

.em-node--highlight:hover .em-node__icon {
  background: linear-gradient(rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.18)), var(--color-bg-surface);
  border-color: rgba(34, 197, 94, 0.5);
  color: #22C55E;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.25);
}

.em-node__label {
  font-family: 'Manrope', var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.em-node__sub {
  display: block;
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  margin-top: 1px;
}

/* ─────────────────────────────────────────────
   ENGAGEMENT MODELS — RESPONSIVE
───────────────────────────────────────────── */

@media (max-width: 479px) {
  .em-section {
    padding-block: var(--space-10) var(--space-12);
  }

  .em-section__header {
    margin-bottom: var(--space-8);
  }

  .em-section__heading {
    font-size: var(--text-3xl);
  }

  .em-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .em-block {
    gap: var(--space-3);
  }

  .em-block__icon {
    width: 40px;
    height: 40px;
  }

  .em-pipeline-card {
    padding: var(--space-4);
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .em-section {
    padding-block: var(--space-10) var(--space-14);
  }

  .em-section__heading {
    font-size: var(--text-3xl);
  }

  .em-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .em-pipeline-card {
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .em-section__heading {
    font-size: var(--text-4xl);
  }

  .em-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .em-pipeline-card {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .em-grid {
    gap: var(--space-8);
  }
}