/* ════════════════════════════════════════════════════════════
   VisionOne7 — "Cloud Architecture Pipeline" navigation
   The nav IS an architecture diagram: service nodes wired
   together with animated dataflow pulses. Skeuomorphic nav
   in the spirit of industry-shaped navbars.
   Loaded after style.css so it overrides the default header.
   ════════════════════════════════════════════════════════════ */

:root {
  --pipe-wire:      #cfdcea;
  --pipe-wire-live: #05b36a;
  --pipe-node-bg:   #ffffff;
  --pipe-rail-bg:   linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
  --pipe-ink:       #2f3a52;
  --pipe-ink-dim:   #7c8aa3;
}

/* ── The rail: a hardware-looking chassis holding the diagram ── */
#header .navbar { position: relative; }
#header { overflow: visible; }

.pipeline-rail {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--pipe-rail-bg);
  border: 1px solid #dfe8f3;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 10px 24px -14px rgba(13,40,80,0.28),
    0 2px 6px -3px rgba(13,40,80,0.12);
  position: relative;
}
/* screw/rivet details at the ends — hardware feel */
.pipeline-rail::before,
.pipeline-rail::after {
  content: "";
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #c3d0e0 70%);
  box-shadow: inset 0 0 0 1px rgba(13,40,80,0.10);
}
.pipeline-rail::before { left: 6px; }
.pipeline-rail::after  { right: 6px; }

/* ── Service node ── */
.pipe-node {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--pipe-node-bg);
  border: 1px solid #e2eaf4;
  color: var(--pipe-ink);
  font-size: 13.5px; font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(13,40,80,0.06);
  transition:
    transform 240ms cubic-bezier(0.22,0.61,0.36,1),
    box-shadow 240ms ease, border-color 240ms ease, color 240ms ease;
  z-index: 2;
}
.pipe-node i.node-ic {
  font-size: 12.5px;
  color: var(--primary, #0557a6);
  transition: color 240ms ease;
}

/* Status LED on each node */
.pipe-node .led {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d6dfeb;
  box-shadow: 0 0 0 2px rgba(214,223,235,0.35);
  transition: background 240ms ease, box-shadow 240ms ease;
  flex: none;
}

.pipe-node:hover {
  transform: translateY(-2px);
  border-color: rgba(5,87,166,0.35);
  box-shadow: 0 10px 22px -12px rgba(5,87,166,0.55);
  color: var(--primary, #0557a6);
}
.pipe-node:hover .led { background: var(--pipe-wire-live); box-shadow: 0 0 0 3px rgba(5,179,106,0.22); }

/* Active node — "running" service */
.pipe-node.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #0a69bf 0%, #05b36a 100%);
  box-shadow: 0 10px 24px -10px rgba(5,87,166,0.65), inset 0 1px 0 rgba(255,255,255,0.28);
}
.pipe-node.active i.node-ic { color: #fff; }
.pipe-node.active .led {
  background: #b9ffdc;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
  animation: pipeLed 1.6s ease-in-out infinite;
}
@keyframes pipeLed {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .55; transform: scale(.8); }
}

/* ── The wire connecting nodes, with a travelling data pulse ── */
.pipe-wire {
  position: relative;
  width: 26px; height: 2px;
  background: var(--pipe-wire);
  flex: none;
  border-radius: 2px;
  overflow: visible;
  z-index: 1;
}
/* the pulse packet */
.pipe-wire::after {
  content: "";
  position: absolute; top: 50%; left: 0;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%;
  background: var(--pipe-wire-live);
  box-shadow: 0 0 8px 1px rgba(5,179,106,0.75);
  animation: pipeFlow 2.6s linear infinite;
  animation-delay: var(--flow-delay, 0s);
}
@keyframes pipeFlow {
  0%   { left: -2px;  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 24px;  opacity: 0; }
}

/* ── Dropdown node (Products) — renders as a "cluster" ── */
.pipe-node-group { position: relative; display: inline-flex; align-items: center; }
.pipe-node-group > .pipe-node i.caret { font-size: 9px; opacity: .65; transition: transform 240ms ease; }
.pipe-node-group:hover > .pipe-node i.caret { transform: rotate(180deg); }

.pipe-cluster {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 6px);
  min-width: 240px; padding: 10px;
  background: #fff;
  border: 1px solid #e2eaf4;
  border-radius: 16px;
  box-shadow: 0 24px 50px -18px rgba(13,40,80,0.28), 0 8px 16px -10px rgba(13,40,80,0.12);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms ease, transform 240ms ease, visibility 240ms ease;
  z-index: 1000;
}
.pipe-node-group:hover .pipe-cluster,
.pipe-node-group:focus-within .pipe-cluster,
.pipe-node-group.open .pipe-cluster { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* connector stub from parent node down into the cluster */
.pipe-cluster::before {
  content: "";
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 14px; background: var(--pipe-wire);
}
.pipe-cluster::after {
  content: "";
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pipe-wire-live);
  box-shadow: 0 0 8px 1px rgba(5,179,106,0.7);
}

.pipe-cluster-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pipe-ink-dim); padding: 4px 10px 8px;
}
.pipe-cluster a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--pipe-ink); font-size: 13.5px; font-weight: 500;
  transition: background 200ms ease, color 200ms ease;
}
.pipe-cluster a i { width: 18px; text-align: center; color: var(--primary, #0557a6); font-size: 13px; }
.pipe-cluster a:hover { background: #eff5fc; color: var(--primary, #0557a6); }
.pipe-cluster a .node-meta { margin-left: auto; font-size: 10.5px; color: var(--pipe-ink-dim); font-weight: 600; }

/* ── Region/legend chip on the left of the rail ── */
.pipe-region {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; margin-right: 4px;
  border-radius: 999px;
  background: #eef5fc;
  border: 1px solid #dce9f7;
  color: #3d5a7d;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.pipe-region .led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pipe-wire-live);
  box-shadow: 0 0 0 3px rgba(5,179,106,0.18);
  animation: pipeLed 2s ease-in-out infinite;
}

/* ── Reduced motion: stop the pulses ── */
@media (prefers-reduced-motion: reduce) {
  .pipe-wire::after, .pipe-node.active .led, .pipe-region .led { animation: none !important; }
  .pipe-wire::after { opacity: .8; left: 10px; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .pipe-region { display: none; }
  .pipe-wire { width: 18px; }
  @keyframes pipeFlow { 0%{left:-2px;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{left:16px;opacity:0} }
}
@media (max-width: 1024px) {
  .pipe-node { padding: 8px 11px; font-size: 12.5px; }
  .pipe-node .label-full { display: none; }
  .pipe-wire { width: 14px; }
}

/* Mobile: the diagram collapses into a vertical "stack" */
@media (max-width: 768px) {
  /* Override legacy #nav-menu overlay rules from style.css */
  #header .pipeline-rail#nav-menu {
    position: absolute; inset: auto 0 auto 0;
    top: calc(100% + 12px);
    width: auto; height: auto; min-height: 0;
    background: var(--pipe-rail-bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transform: none; opacity: 1; visibility: visible;
    overflow: visible; justify-content: flex-start;
  }
  .pipeline-rail {
    display: none;
    flex-direction: column; align-items: stretch; gap: 6px;
    padding: 14px; border-radius: 18px;
    border: 1px solid #dfe8f3;
    box-shadow: 0 24px 50px -18px rgba(13,40,80,0.28);
  }
  .pipeline-rail.open { display: flex; }

  /* Keep everything inside the viewport so the toggle can't be pushed off */
  html, body { overflow-x: hidden; max-width: 100%; }
  #header { left: 0; right: 0; width: 100%; }
  #header .container {
    width: 100%; max-width: 100%; box-sizing: border-box;
    padding-left: 16px; padding-right: 16px; margin: 0;
  }
  #header .navbar {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; max-width: 100%; gap: 12px; padding-left: 0; padding-right: 0;
  }
  #header .logo { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  #header .logo h1 { font-size: 18px; }

  /* Hamburger: pinned to the viewport so nothing can push it off-screen */
  #header .menu-toggle {
    display: inline-flex !important;
    position: fixed; top: 14px; right: 14px; z-index: 1200;
    align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: #fff; border: 1px solid #e2eaf4;
    color: var(--ink-900, #0b1220); font-size: 20px;
    box-shadow: 0 2px 8px -2px rgba(13,40,80,0.18);
  }
  #header.header-scrolled .menu-toggle { top: 9px; }
  #header .menu-toggle:hover { border-color: rgba(5,87,166,0.35); color: var(--primary, #0557a6); }
  .pipeline-rail::before, .pipeline-rail::after { display: none; }
  .pipe-region { display: inline-flex; align-self: flex-start; margin: 0 0 6px; }
  .pipe-node { justify-content: flex-start; width: 100%; padding: 12px 14px; font-size: 14px; }
  .pipe-node .label-full { display: inline; }
  /* wires become vertical connectors */
  .pipe-wire { width: 2px; height: 12px; margin-left: 22px; }
  @keyframes pipeFlow { 0%{top:-2px;left:-1.5px;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:10px;left:-1.5px;opacity:0} }
  .pipe-wire::after { left: -1.5px; top: 0; animation-name: pipeFlow; }
  .pipe-node-group { display: block; width: 100%; }
  .pipe-node-group > .pipe-node { width: 100%; }
  .pipe-cluster {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; width: 100%; margin-top: 6px; box-shadow: none;
    border-style: dashed; display: none;
  }
  .pipe-node-group.open .pipe-cluster { display: block; transform: none; }
  .pipe-cluster::before, .pipe-cluster::after { display: none; }
}

/* ════════════════════════════════════════════════════════════
   PIPELINE THEME — extended to footer & sections
   The page reads as a deployed cloud system.
   ════════════════════════════════════════════════════════════ */

/* ── Footer status rail (mirrors the nav pipeline) ── */
.status-rail {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
  width: fit-content; max-width: 100%; margin: 8px auto 4px;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}
.status-node {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.82);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: background 240ms ease, color 240ms ease, transform 240ms ease;
}
.status-node:hover { background: rgba(255,255,255,0.12); color: #fff; transform: translateY(-2px); }
.status-node i { font-size: 12px; color: #4fce8f; }
.status-node .led {
  width: 7px; height: 7px; border-radius: 50%;
  background: #05b36a; box-shadow: 0 0 8px 1px rgba(5,179,106,0.8);
  animation: pipeLed 1.8s ease-in-out infinite; flex: none;
}
.status-node.ok { color: #b9ffdc; }

.status-wire {
  position: relative; width: 26px; height: 2px; flex: none;
  background: rgba(255,255,255,0.14); border-radius: 2px;
}
.status-wire::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: #05b36a; box-shadow: 0 0 8px 1px rgba(5,179,106,0.8);
  animation: pipeFlow 2.6s linear infinite;
  animation-delay: var(--flow-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .status-wire::after, .status-node .led { animation: none !important; }
}
@media (max-width: 768px) {
  .status-rail { border-radius: 18px; gap: 8px; padding: 14px; }
  .status-wire { display: none; }
  .status-node { width: 100%; justify-content: flex-start; }
}

/* ── Section rhythm: service cards read as provisioned nodes ── */
.service-box { position: relative; }
.service-box::after {
  content: ""; position: absolute; top: 14px; left: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #d6dfeb; transition: background 240ms ease, box-shadow 240ms ease;
  z-index: 3;
}
.service-box:hover::after {
  background: #05b36a; box-shadow: 0 0 8px 1px rgba(5,179,106,0.7);
}

/* App/product cards get a "deployed" status dot */
.app-card { position: relative; }
.app-card::after {
  content: ""; position: absolute; top: 16px; left: 16px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #05b36a; box-shadow: 0 0 8px 1px rgba(5,179,106,0.65);
  animation: pipeLed 2.4s ease-in-out infinite; z-index: 3;
}
@media (prefers-reduced-motion: reduce) { .app-card::after { animation: none; } }

/* ── Impact band → live monitoring dashboard ── */
.metrics-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 16px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.metrics-head .mh-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.32); flex: none;
}
.metrics-head .mh-dot:nth-child(1) { background: #ff5f57; }
.metrics-head .mh-dot:nth-child(2) { background: #febc2e; }
.metrics-head .mh-dot:nth-child(3) { background: #28c840; }
.metrics-head .mh-title {
  margin-left: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
.metrics-head .mh-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
  color: #b9ffdc;
}
.metrics-head .mh-live .led {
  width: 7px; height: 7px; border-radius: 50%; background: #05f08a;
  box-shadow: 0 0 8px 2px rgba(5,240,138,0.8);
  animation: pipeLed 1.6s ease-in-out infinite;
}

/* Sparkline bars under each metric */
.metric-gauge { position: relative; }
.spark {
  display: flex; align-items: flex-end; gap: 3px;
  height: 26px; margin-top: 10px;
}
.spark i {
  display: block; width: 5px; border-radius: 2px 2px 0 0;
  height: var(--h, 50%);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.35));
  transform-origin: bottom;
  animation: sparkRise 900ms var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.spark i:nth-child(1){animation-delay:.05s}.spark i:nth-child(2){animation-delay:.1s}
.spark i:nth-child(3){animation-delay:.15s}.spark i:nth-child(4){animation-delay:.2s}
.spark i:nth-child(5){animation-delay:.25s}.spark i:nth-child(6){animation-delay:.3s}
.spark i:nth-child(7){animation-delay:.35s}
.spark i:last-child { background: linear-gradient(180deg, #b9ffdc, rgba(185,255,220,0.5)); }
@keyframes sparkRise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .spark i { animation: none; }
  .metrics-head .mh-live .led { animation: none; }
}
@media (max-width: 768px) {
  .metrics-head .mh-title { display: none; }
  .spark { height: 20px; }
}

/* ── Impact band: compact 3-stat layout (overrides legacy 4-col grid) ── */
.impact-card { padding: clamp(24px, 3vw, 34px) clamp(24px, 3.5vw, 40px); }
.impact-row.metrics-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px; align-items: center;
  padding-bottom: 22px; margin-bottom: 22px;
}
.metrics-row .impact-num { font-size: clamp(26px, 2.6vw, 38px); }
.metrics-row .impact-label { margin-top: 5px; font-size: 10.5px; letter-spacing: 0.09em; }
.metrics-row .impact-sep { height: 54px; }
.metrics-row .spark { height: 18px; margin-top: 8px; justify-content: center; }
.metrics-row .spark i { width: 4px; }
.metrics-head { padding-bottom: 12px; margin-bottom: 14px; }
.impact-cta h3 { font-size: clamp(18px, 2vw, 24px); }

@media (max-width: 768px) {
  .impact-row.metrics-row { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .metrics-row .impact-sep { display: none; }
  .metrics-row .impact-num { font-size: 24px; }
  .metrics-row .spark { height: 14px; }
}
@media (max-width: 480px) {
  .impact-row.metrics-row { grid-template-columns: 1fr; gap: 18px; }
}

/* ════════════════════════════════════════════════════════════
   SECTION SYSTEM — every section reads as part of the platform
   ════════════════════════════════════════════════════════════ */

/* ── Section badge → terminal command prompt ── */
.section-badge {
  position: relative;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
  background: #0e1b2e !important;
  color: #7fe7b4 !important;
  border: 1px solid rgba(5,179,106,0.35) !important;
  border-radius: 8px !important;
  padding: 7px 14px 7px 30px !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: lowercase !important;
  box-shadow: 0 6px 16px -8px rgba(13,40,80,0.45);
}
.section-badge::before {
  content: "$";
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: #05b36a; font-weight: 700;
}
.section-badge::after {
  content: "";
  display: inline-block; width: 7px; height: 13px; margin-left: 7px;
  background: #7fe7b4; vertical-align: -2px;
  animation: caretBlink 1.1s steps(1) infinite;
}
@keyframes caretBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ── Service cards → running instances ── */
.service-box { padding-top: 42px !important; }
.service-box .svc-status {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px 9px 30px;
  background: linear-gradient(90deg, rgba(5,179,106,0.10), rgba(5,87,166,0.06));
  border-bottom: 1px solid rgba(13,40,80,0.06);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: #0d7a4d; text-transform: uppercase;
  border-radius: 20px 20px 0 0;
}
.service-box .svc-status .bar {
  margin-left: auto; width: 46px; height: 3px; border-radius: 2px;
  background: rgba(13,40,80,0.10); overflow: hidden; position: relative;
}
.service-box .svc-status .bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #0a69bf, #05b36a);
  transform: scaleX(.35); transform-origin: left;
  transition: transform 600ms cubic-bezier(.16,1,.3,1);
}
.service-box:hover .svc-status .bar::after { transform: scaleX(1); }
/* reposition legacy status dot into the strip */
.service-box::after { top: 14px !important; left: 14px !important; }

/* ── Client logos → connected endpoints ── */
.client-logo-item { position: relative; }
.client-logo-item .endpoint-tag {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(5,179,106,0.12);
  border: 1px solid rgba(5,179,106,0.28);
  color: #0d7a4d;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.client-logo-item:hover .endpoint-tag { opacity: 1; transform: translateY(0); }
.client-logo-item .endpoint-tag .led {
  width: 5px; height: 5px; border-radius: 50%; background: #05b36a;
  box-shadow: 0 0 6px 1px rgba(5,179,106,0.7);
}

/* ── Recognition → verified certifications ── */
.recognition-logo-item { position: relative; }
.recognition-logo-item .verified {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0a69bf, #05b36a);
  color: #fff; font-size: 10px;
  box-shadow: 0 6px 14px -6px rgba(5,87,166,0.6);
}

/* ── Contact → API request panel ── */
.contact-api-head {
  max-width: 800px; margin: 0 auto 0; padding: 12px 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #0e1b2e;
  border: 1px solid rgba(13,40,80,0.5);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
.contact-api-head .verb {
  padding: 4px 9px; border-radius: 6px;
  background: #05b36a; color: #04231a;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
}
.contact-api-head .path { color: #cfe3f5; font-size: 12px; }
.contact-api-head .status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: #7fe7b4; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
}
.contact-api-head .status .led {
  width: 6px; height: 6px; border-radius: 50%; background: #05f08a;
  box-shadow: 0 0 8px 2px rgba(5,240,138,0.75);
  animation: pipeLed 1.7s ease-in-out infinite;
}
#zoho-form-container {
  border: 1px solid rgba(13,40,80,0.12);
  border-radius: 0 0 14px 14px;
  overflow: hidden; background: #fff;
  box-shadow: 0 24px 50px -28px rgba(13,40,80,0.35);
}

@media (prefers-reduced-motion: reduce) {
  .section-badge::after, .contact-api-head .status .led { animation: none !important; }
}
@media (max-width: 768px) {
  .contact-api-head { border-radius: 12px 12px 0 0; }
  .contact-api-head .path { font-size: 11px; word-break: break-all; }
}

/* keep the big service number clear of the status strip */
.service-box .service-number { top: 46px !important; opacity: .55; }

/* ════════════════════════════════════════════════════════════
   PRODUCTS → "deployed instances" registry (2×2, richer cards)
   ════════════════════════════════════════════════════════════ */
.apps-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 22px !important;
  align-items: stretch;
}

.app-card {
  display: grid !important;
  grid-template-columns: 96px 1fr;
  grid-template-areas:
    "status status"
    "icon   head"
    "icon   body"
    "feats  feats"
    "foot   foot";
  column-gap: 20px; row-gap: 0;
  padding: 0 24px 22px !important;
  border-radius: 22px !important;
  overflow: hidden;
  text-align: left !important;
}

/* status strip across the top */
.app-card .app-badge {
  grid-area: status;
  position: static !important;
  margin: 0 -24px 18px !important;
  display: flex !important; align-items: center; gap: 8px;
  padding: 9px 24px 9px 34px !important;
  background: linear-gradient(90deg, rgba(5,179,106,0.10), rgba(5,87,166,0.06)) !important;
  border-bottom: 1px solid rgba(13,40,80,0.06);
  border-radius: 0 !important;
  color: #0d7a4d !important;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important;
}
.app-card .app-badge.featured {
  background: linear-gradient(90deg, rgba(5,87,166,0.14), rgba(5,179,106,0.10)) !important;
  color: #084c8f !important;
}
/* the live dot sits inside the strip */
.app-card::after { top: 15px !important; left: 16px !important; }

/* platform/downloads chip moves to the right of the strip */
.app-card .app-downloads {
  position: absolute !important; top: 7px; right: 18px; z-index: 4;
  background: transparent !important; box-shadow: none !important;
  padding: 0 !important;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px !important; font-weight: 700; letter-spacing: 0.06em;
  color: #5b6b83 !important;
}

.app-card .app-icon { grid-area: icon; margin: 0 !important; }
.app-card .app-icon img {
  width: 88px !important; height: 88px !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 26px -12px rgba(13,40,80,0.4);
}
.app-card .app-content {
  grid-area: head; display: contents;
}
.app-card .new-tag { display: none !important; }
.app-card .app-content h3 {
  grid-area: head; margin: 0 0 6px !important;
  font-size: 19px !important; line-height: 1.25;
}
.app-card .app-meta {
  grid-area: body; align-self: start;
  display: flex !important; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 8px !important;
}
.app-card .app-content p {
  grid-area: body; align-self: end;
  margin: 34px 0 0 !important; font-size: 13.5px !important; line-height: 1.6;
  color: var(--ink-600, #526079) !important;
}
.app-card .app-features {
  grid-area: feats; margin: 16px 0 0 !important;
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 14px;
  padding-top: 14px; border-top: 1px dashed rgba(13,40,80,0.10);
}
.app-card .app-features .feature { font-size: 12.5px !important; }
.app-card .app-footer {
  grid-area: foot; margin: 16px 0 0 !important;
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid rgba(13,40,80,0.07);
}
.app-card .learn-more-link {
  grid-area: foot; justify-self: start; align-self: center;
  margin: 16px 0 0 !important;
}
/* put learn-more inline with footer */
.app-card .app-footer { order: 2; }

.app-card:hover { transform: translateY(-6px); }

@media (max-width: 1024px) {
  .apps-wrapper { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .app-card {
    grid-template-columns: 1fr;
    grid-template-areas: "status" "icon" "head" "body" "feats" "foot";
    row-gap: 8px;
  }
  .app-card .app-content p { margin-top: 6px !important; }
  .app-card .app-features { grid-template-columns: 1fr; }
  .app-card .app-icon img { width: 72px !important; height: 72px !important; }
}

/* fix: learn-more + platform + CTA share one clean footer row */
.app-card {
  grid-template-areas:
    "status status"
    "icon   head"
    "icon   body"
    "feats  feats"
    "foot   foot"
    "more   more" !important;
}
.app-card .app-footer {
  grid-area: foot;
  order: 0 !important;
  margin: 16px 0 0 !important;
}
.app-card .learn-more-link {
  grid-area: more !important;
  justify-self: start;
  margin: 12px 0 0 !important;
  padding-top: 12px;
  border-top: 1px dashed rgba(13,40,80,0.10);
  width: 100%;
}

/* footer on a single row: platform · learn more · CTA */
.app-card {
  grid-template-areas:
    "status status"
    "icon   head"
    "icon   body"
    "feats  feats"
    "foot   foot" !important;
}
.app-card .app-footer {
  display: flex !important; align-items: center; gap: 14px; flex-wrap: nowrap;
  margin: 16px 0 0 !important; padding-top: 14px;
  border-top: 1px solid rgba(13,40,80,0.07);
}
.app-card .app-platform { flex: none; }
.app-card .app-store { margin-left: auto; order: 3; }
.app-card .learn-more-link {
  grid-area: auto !important;
  order: 2; margin: 0 0 0 auto !important;
  padding: 0 !important; border: 0 !important; width: auto !important;
  white-space: nowrap; font-size: 13.5px;
}
@media (max-width: 560px) {
  .app-card .app-footer { flex-wrap: wrap; }
  .app-card .app-store { margin-left: 0; width: 100%; }
  .app-card .app-store .app-button { width: 100%; justify-content: center; }
  .app-card .learn-more-link { margin-left: auto !important; }
}

/* drop the redundant platform label — it duplicates the header chip */
.app-card .app-platform { display: none !important; }
.app-card .learn-more-link { margin: 0 auto 0 0 !important; }
.app-card .app-store { margin-left: auto; }

/* force learn-more INTO the footer row (it is a grid child, not a flex child) */
.app-card { grid-template-areas:
  "status status" "icon head" "icon body" "feats feats" "foot foot" !important; }
.app-card .app-footer {
  grid-area: foot !important;
  display: flex !important; align-items: center; justify-content: flex-end;
  gap: 14px; margin: 16px 0 0 !important;
  padding-top: 14px; border-top: 1px solid rgba(13,40,80,0.07);
}
.app-card .learn-more-link {
  grid-area: foot !important;
  align-self: center; justify-self: start;
  margin: 16px 0 0 !important; padding-top: 14px;
  border: 0 !important; width: auto !important;
  z-index: 2; position: relative;
}

/* ════════════════════════════════════════════════════════════
   SUB-PAGE SYSTEM — product pages inherit the pipeline language
   ════════════════════════════════════════════════════════════ */

/* ── Hero badge → deployment tag ── */
.hero-badge {
  position: relative;
  display: inline-flex !important; align-items: center; gap: 8px;
  background: #0e1b2e !important;
  color: #7fe7b4 !important;
  border: 1px solid rgba(5,179,106,0.35) !important;
  border-radius: 8px !important;
  padding: 7px 14px 7px 30px !important;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.06em !important; text-transform: lowercase !important;
  box-shadow: 0 6px 16px -8px rgba(13,40,80,0.45);
}
.hero-badge::before {
  content: "▸"; position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%); color: #05b36a; font-weight: 700;
}
.hero-badge i { color: #7fe7b4 !important; }

/* ── Hero stats → live gauges ── */
.hero-stat {
  position: relative;
  border: 1px solid #e2eaf4 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px -14px rgba(13,40,80,0.3) !important;
  padding: 16px 20px 14px !important;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1), box-shadow 240ms ease;
}
.hero-stat::before {
  content: ""; position: absolute; top: 9px; right: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #05b36a; box-shadow: 0 0 7px 1px rgba(5,179,106,0.7);
  animation: pipeLed 2.2s ease-in-out infinite;
}
.hero-stat:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(5,87,166,0.45) !important; }
.hero-stat-value { font-family: 'Montserrat', sans-serif; }
.hero-stat-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
  font-size: 9.5px !important; letter-spacing: 0.1em !important;
}

/* ── Hero feature tags → capability chips ── */
.hero-feature-tag {
  border-radius: 10px !important;
  border-color: #e2eaf4 !important;
  font-weight: 500;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.hero-feature-tag:hover {
  transform: translateY(-2px);
  border-color: rgba(5,87,166,0.35) !important;
  box-shadow: 0 8px 18px -10px rgba(5,87,166,0.5);
}

/* ── Section titles → terminal prompt above heading ── */
.section-title-product { position: relative; }
.section-title-product .cmd,
.section-header .cmd {
  display: inline-flex; align-items: center;
  margin: 0 auto 14px; padding: 7px 14px 7px 30px;
  position: relative;
  background: #0e1b2e; color: #7fe7b4;
  border: 1px solid rgba(5,179,106,0.35); border-radius: 8px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  box-shadow: 0 6px 16px -8px rgba(13,40,80,0.45);
}
.section-title-product .cmd::before,
.section-header .cmd::before {
  content: "$"; position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%); color: #05b36a; font-weight: 700;
}
.section-title-product .cmd::after,
.section-header .cmd::after {
  content: ""; display: inline-block; width: 7px; height: 12px; margin-left: 7px;
  background: #7fe7b4; vertical-align: -2px;
  animation: caretBlink 1.1s steps(1) infinite;
}

/* ── Calculator / feature boxes → provisioned modules ── */
.calculator-box {
  position: relative; overflow: hidden;
  border-left: none !important;
  border: 1px solid #e2eaf4 !important;
  border-radius: 16px !important;
  padding-top: 34px !important;
  transition: transform 280ms cubic-bezier(.22,.61,.36,1), box-shadow 280ms ease !important;
}
.calculator-box::before {
  content: "module"; position: absolute; top: 0; left: 0; right: 0;
  padding: 7px 12px 7px 26px;
  background: linear-gradient(90deg, rgba(5,179,106,0.10), rgba(5,87,166,0.06));
  border-bottom: 1px solid rgba(13,40,80,0.06);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  color: #0d7a4d; text-transform: uppercase; text-align: left;
}
.calculator-box::after {
  content: ""; position: absolute; top: 11px; left: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #d6dfeb; transition: background 240ms ease, box-shadow 240ms ease;
}
.calculator-box:hover { transform: translateY(-7px); box-shadow: 0 26px 48px -24px rgba(5,87,166,0.4) !important; }
.calculator-box:hover::after { background: #05b36a; box-shadow: 0 0 8px 1px rgba(5,179,106,0.7); }

/* ── "Explore more products" mini cards → registry entries ── */
.product-card-mini {
  position: relative; overflow: hidden;
  border: 1px solid #e2eaf4 !important;
  border-radius: 18px !important;
  padding-top: 34px !important;
  transition: transform 280ms cubic-bezier(.22,.61,.36,1), box-shadow 280ms ease !important;
}
.product-card-mini::before {
  content: "running"; position: absolute; top: 0; left: 0; right: 0;
  padding: 7px 12px 7px 26px;
  background: linear-gradient(90deg, rgba(5,179,106,0.10), rgba(5,87,166,0.06));
  border-bottom: 1px solid rgba(13,40,80,0.06);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  color: #0d7a4d; text-transform: uppercase; text-align: left;
}
.product-card-mini::after {
  content: ""; position: absolute; top: 11px; left: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #05b36a; box-shadow: 0 0 8px 1px rgba(5,179,106,0.65);
  animation: pipeLed 2.4s ease-in-out infinite;
}
.product-card-mini:hover { transform: translateY(-7px); box-shadow: 0 26px 48px -24px rgba(5,87,166,0.4) !important; }

@media (prefers-reduced-motion: reduce) {
  .hero-stat::before, .product-card-mini::after,
  .section-title-product .cmd::after,
.section-header .cmd::after { animation: none !important; }
}

/* hero stat labels: keep on one line */
.hero-stat { min-width: 118px; }
.hero-stat-label { white-space: nowrap; }
.hero-stats-row { flex-wrap: wrap; }

/* keep the three hero stats on one row */
.hero-stats-row { gap: 12px !important; flex-wrap: nowrap !important; justify-content: center; }
.hero-stat { min-width: 0 !important; padding: 14px 12px 12px !important; flex: 1 1 0; }
.hero-stat-label { font-size: 8.5px !important; letter-spacing: 0.06em !important; }
.hero-stat-value { font-size: 1.35rem !important; }

/* cloudsketcher: cmd badge on its own line, centered under the pill */
.section-header { text-align: center; }
.section-header .cmd { display: inline-flex; margin: 12px auto 14px; }
.section-header .section-badge + .cmd,
.section-header .cmd { flex-basis: 100%; }
.section-header .cmd::after { flex: none; }
/* force a line break before the cmd badge */
.section-header .cmd { margin-left: auto; margin-right: auto; }
.section-header > .cmd { display: flex; width: fit-content; }