.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding: 64px 7vw 72px;
  border-bottom: 1px solid #171d29;
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(#1c2432 1px, transparent 1px),
    linear-gradient(90deg, #1c2432 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  right: -180px;
  top: 5%;
  border: 1px solid #283248;
  border-radius: 50%;
  opacity: 0.35;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
}

.hero-eyebrow {
  margin: 0 0 24px;
  color: #8d98aa;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.hero-title {
  max-width: 1000px;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: clamp(42px, 5.6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 600;
}

.hero-title span {
  color: #8995a9;
}

.hero-copy {
  max-width: 720px;
  margin: 32px 0 0;
  color: #aeb7c6;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: #f3f6fb;
  color: #080b12;
  border: 1px solid #f3f6fb;
}

.button-secondary {
  color: #dce2ec;
  border: 1px solid #2b3444;
  background: #0e131d;
}

.button-secondary:hover {
  border-color: #536078;
}

.hero-system {
  display: flex;
  align-items: center;
  width: min(760px, 100%);
  margin-top: 58px;
  color: #8d98aa;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.hero-system .reliability .system-node {
  flex: 0 0 auto;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.hero-system .system-link {
  position: relative;
  height: 1px;
  flex: 1;
  min-width: 24px;
  margin: 0 12px;
  background: #2a3342;
}

.hero-system .system-link::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #56637a;
  border-right: 1px solid #56637a;
  transform: rotate(45deg);
}

@media (max-width: 700px) {
  .hero {
    min-height: 92vh;
    padding: 48px 24px 64px;
  }

  .hero-title {
    font-size: clamp(40px, 11vw, 58px);
  }

  .hero-copy {
    margin-top: 26px;
    font-size: 16px;
  }

  .hero-system {
    margin-top: 46px;
    font-size: 11px;
  }

  .hero-system .system-link {
    margin: 0 7px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: Inter, Arial, sans-serif;
  background: #080b12;
  color: #f5f7fb;
}

.tools-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 80px 0;
  overflow: hidden;
}

.eyebrow {
  margin: 0 auto;
  padding: 0 24px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #8d98aa;
}

h1 {
  margin: 0 auto 32px;
  padding: 0 24px;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  text-align: center;
}

.marquee {
  width: 100%;
  overflow: hidden;
  padding: 14px 0;
}

.marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  will-change: transform;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  flex: 0 0 auto;
}

.tool-item {
  flex: 0 0 auto;
  min-width: 180px;
  min-height: 64px;
  padding: 12px 24px;
  border: 1px solid #202735;
  border-radius: 18px;
  background: #0e131d;
  color: #dce2ec;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.tool-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 24px;
}

.tool-item img[alt="HighLevel"] {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.generic-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #647086;
  border-radius: 8px;
  color: #e4e9f2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 24px;
}

.webhook-icon {
  font-size: 20px;
}

.crm-icon {
  font-size: 9px;
  letter-spacing: -0.04em;
}

.marquee-right .marquee-track {
  animation: move-right 22s linear infinite;
}

.marquee-left .marquee-track {
  animation: move-left 22s linear infinite;
}

@keyframes move-right {
  from {
    transform: translateX(calc(var(--marquee-distance) * -1));
  }
  to {
    transform: translateX(0);
  }
}

@keyframes move-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--marquee-distance) * -1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    transform: translateX(0);
  }
}

@media (max-width: 600px) {
  .tools-section {
    gap: 16px;
  }

  .tool-item {
    min-width: 150px;
    min-height: 58px;
    padding: 11px 18px;
    font-size: 14px;
  }

  .tool-item img {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
}




/* JS-driven hero signal.
   One constant-speed timeline controls every node and connector, avoiding
   separate CSS animation clocks and visible timing drift. */
.hero-system .reliability .system-node {
  position: relative;
  display: inline-block;
  color: #8d98aa;
  transform: scale(1);
  transform-origin: center;
  transition:
    color 180ms ease,
    text-shadow 180ms ease,
    transform 180ms ease;
}

.hero-system .system-node.is-active {
  color: #ffffff;
  transform: scale(1.14);
  text-shadow: 0 0 8px #ffffff, 0 0 18px #9bbcff;
}

.hero-system .system-link {
  overflow: visible;
  background: #2a3342;
}

.hero-system .signal-dot {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 7px #ffffff, 0 0 15px #8fb0ff, 0 0 25px #688fff;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: left, opacity;
}

.hero-system .system-link::after {
  border-color: #56637a;
}

@media (prefers-reduced-motion: reduce) {
  .hero-system .signal-dot {
    display: none;
  }

  .hero-system .system-node:first-child {
    color: #ffffff;
    text-shadow: 0 0 8px #ffffff, 0 0 18px #9bbcff;
  }
}


/* Selected projects */
.projects-section {
  padding: 110px 7vw 120px;
  border-top: 1px solid #171d29;
  background: #0a0e16;
}

.projects-inner {
  width: min(1220px, 100%);
  margin: 0 auto;
}

.section-eyebrow {
  margin: 0 0 22px;
  color: #8d98aa;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.projects-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 50px;
  align-items: end;
  margin-bottom: 54px;
}

.projects-heading h2 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
}

.projects-heading > p {
  margin: 0;
  color: #8f9bad;
  font-size: 15px;
  line-height: 1.7;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.project-card {
  position: relative;
  min-height: 360px;
  padding: 28px;
  border: 1px solid #202735;
  border-radius: 22px;
  background: #0e131d;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.project-card:hover {
  transform: translateY(-4px);
  border-color: #3a465a;
  background: #101722;
}

.project-card-featured {
  grid-column: 1 / -1;
  min-height: 410px;
}

.project-number {
  color: #59667a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.project-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin-top: 60px;
}

.project-type {
  margin: 0 0 12px;
  color: #78869a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-card h3 {
  margin: 0;
  max-width: 650px;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.project-card .project-content > p:not(.project-type) {
  max-width: 650px;
  margin: 18px 0 0;
  color: #929daf;
  font-size: 14px;
  line-height: 1.7;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.project-tags span {
  padding: 7px 10px;
  border: 1px solid #252e3d;
  border-radius: 999px;
  color: #8995a8;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.project-flow {
  position: absolute;
  right: 34px;
  top: 46px;
  width: min(43%, 480px);
  display: flex;
  align-items: center;
  color: #66748a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.project-flow i {
  height: 1px;
  flex: 1;
  margin: 0 10px;
  background: #2d3747;
}

@media (max-width: 760px) {
  .projects-section {
    padding: 82px 24px 90px;
  }

  .projects-heading {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 38px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-card-featured {
    grid-column: auto;
  }

  .project-card {
    min-height: 330px;
    padding: 24px;
  }

  .project-content {
    margin-top: 70px;
  }

  .project-flow {
    top: 54px;
    left: 24px;
    right: 24px;
    width: auto;
  }
}


/* Projects V2 — viewport-balanced layout
   Goal: the section reads as one composed screen on desktop, with all four
   project cards visible together and consistent vertical spacing. */
@media (min-width: 900px) {
  .projects-section {
    min-height: 100vh;
    padding: 64px 7vw 68px;
    display: flex;
    align-items: center;
  }

  .projects-inner {
    width: min(1220px, 100%);
  }

  .section-eyebrow {
    margin-bottom: 14px;
  }

  .projects-heading {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 42px;
    margin-bottom: 30px;
  }

  .projects-heading h2 {
    font-size: clamp(36px, 4vw, 58px);
  }

  .projects-heading > p {
    font-size: 14px;
    line-height: 1.6;
  }

  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .project-card,
  .project-card-featured {
    min-height: 250px;
    padding: 22px;
  }

  .project-card-featured {
    grid-column: 1 / -1;
    min-height: 270px;
  }

  .project-content {
    margin-top: 28px;
  }

  .project-card-featured .project-content {
    margin-top: 34px;
    max-width: 650px;
  }

  .project-card h3 {
    font-size: clamp(21px, 2vw, 29px);
  }

  .project-card .project-content > p:not(.project-type) {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.55;
  }

  .project-type {
    margin-bottom: 9px;
    font-size: 10px;
  }

  .project-tags {
    gap: 6px;
    margin-top: 15px;
  }

  .project-tags span {
    padding: 5px 8px;
    font-size: 9px;
  }

  .project-flow {
    right: 26px;
    top: 30px;
    width: min(42%, 450px);
  }
}

/* On shorter laptop screens, compress only this section further so the
   complete project composition remains visible without oversized cards. */
@media (min-width: 900px) and (max-height: 850px) {
  .projects-section {
    padding-top: 42px;
    padding-bottom: 44px;
  }

  .projects-heading {
    margin-bottom: 22px;
  }

  .projects-heading h2 {
    font-size: clamp(34px, 3.6vw, 52px);
  }

  .project-card,
  .project-card-featured {
    min-height: 220px;
  }

  .project-card-featured {
    min-height: 235px;
  }

  .project-content,
  .project-card-featured .project-content {
    margin-top: 20px;
  }

  .project-card h3 {
    font-size: clamp(20px, 1.8vw, 27px);
  }

  .project-tags {
    margin-top: 12px;
  }
}

.projects-section{min-height:auto!important;display:block!important;padding:86px 0 96px!important;overflow:hidden;background:#0a0e16;border-top:1px solid #171d29}
.projects-section .projects-inner{width:min(1220px,86%);margin:0 auto 42px}.projects-section .projects-heading{margin-bottom:0}
.project-marquee{width:100%;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.project-marquee-track{display:flex;width:max-content;will-change:transform;animation:project-scroll-left 34s linear infinite}
.project-marquee-group{display:flex;gap:18px;padding-right:18px}
@keyframes project-scroll-left{from{transform:translateX(0)}to{transform:translateX(calc(var(--project-marquee-distance)*-1))}}
.project-tile{width:390px;min-height:250px;padding:26px;border:1px solid #202a39;border-radius:20px;background:#0e131d;color:#eef2f8;font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.project-tile:hover,.project-tile:focus-visible{transform:translateY(-4px);border-color:#52627a;background:#111925;outline:none}
.project-tile-number{color:#617087;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.12em}
.project-tile-type{margin-top:48px;color:#7f8da3;font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.project-tile strong{margin-top:10px;max-width:330px;font-size:25px;line-height:1.08;letter-spacing:-.035em;font-weight:600}
.project-tile-cta{margin-top:auto;padding-top:24px;color:#94a2b7;font-size:12px}
.project-modal{position:fixed;inset:0;z-index:1000;display:none}.project-modal.is-open{display:block}
.project-modal-backdrop{position:absolute;inset:0;background:rgba(3,6,11,.82);backdrop-filter:blur(8px)}
.project-modal-panel{position:absolute;inset:4vh 4vw;overflow-y:auto;border:1px solid #273143;border-radius:24px;background:#0b1018;color:#eef2f8;box-shadow:0 24px 90px rgba(0,0,0,.45)}
.project-modal-close{position:sticky;z-index:5;top:18px;float:right;margin:18px 18px 0 0;width:44px;height:44px;border:1px solid #303a4b;border-radius:50%;background:#111823;color:#dce4ef;font-size:26px;cursor:pointer}
.project-detail{width:min(1160px,calc(100% - 64px));margin:0 auto;padding:72px 0 76px}.project-detail-kicker{color:#8290a5;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.project-detail h2{max-width:850px;margin:16px 0 0;font-size:clamp(38px,5vw,68px);line-height:.98;letter-spacing:-.05em;font-weight:600}
.project-detail-intro{max-width:760px;margin:24px 0 0;color:#a4afbf;font-size:16px;line-height:1.7}
.project-detail-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px}.project-detail-meta div{padding:18px;border:1px solid #202a38;border-radius:14px;background:#0e151f}
.project-detail-meta span{display:block;color:#66758b;font-size:9px;letter-spacing:.13em;text-transform:uppercase}.project-detail-meta strong{display:block;margin-top:8px;color:#dfe6ef;font-size:13px;line-height:1.5}
.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:46px}.project-shot{margin:0;border:1px solid #202a38;border-radius:18px;overflow:hidden;background:#090d14}.project-shot.wide{grid-column:1/-1}
.project-shot img{display:block;width:100%;height:auto}.project-shot figcaption{padding:14px 16px 16px;color:#8f9caf;font-size:11px;line-height:1.5}
.project-placeholder{margin-top:42px;padding:32px;border:1px solid #202a38;border-radius:18px;color:#8f9caf;background:#0e151f;line-height:1.7}body.project-modal-open{overflow:hidden}
@media(max-width:760px){.projects-section{padding:72px 0 78px!important}.projects-section .projects-inner{width:calc(100% - 48px);margin-bottom:30px}.project-tile{width:300px;min-height:225px;padding:22px}.project-tile-type{margin-top:36px}.project-tile strong{font-size:22px}.project-modal-panel{inset:12px;border-radius:18px}.project-detail{width:calc(100% - 36px);padding-top:60px}.project-detail-meta,.project-gallery{grid-template-columns:1fr}.project-shot.wide{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.project-marquee-track{animation:none}}


/* Refinement pass — hero + selected projects */
.hero {
  align-items: center !important;
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}

.hero-system {
  width: min(900px, 100%);
  margin-top: 58px;
  font-size: 16px;
  letter-spacing: 0.14em;
}

.hero-system .system-link {
  min-width: 58px;
  margin-left: 16px;
  margin-right: 16px;
}

.projects-section {
  min-height: 100vh !important;
  padding-top: 58px !important;
  padding-bottom: 72px !important;
}

.projects-section .projects-inner {
  margin-bottom: 30px;
}

.projects-section .projects-heading {
  align-items: start;
}

.project-tile {
  width: 410px;
  min-height: 330px;
  padding: 28px;
}

.project-tile-type {
  margin-top: 42px;
}

.project-tile strong {
  max-width: 350px;
  font-size: 26px;
}

.project-tile-description {
  display: block;
  max-width: 345px;
  margin-top: 18px;
  color: #8e9bad;
  font-size: 13px;
  line-height: 1.6;
}

.project-tile-cta {
  padding-top: 22px;
}

@media (max-width: 760px) {
  .hero {
    align-items: center !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .hero-system {
    width: 100%;
    font-size: 12px;
    letter-spacing: 0.09em;
  }

  .hero-system .system-link {
    min-width: 20px;
    margin-left: 8px;
    margin-right: 8px;
  }

  .projects-section {
    min-height: auto !important;
    padding-top: 52px !important;
  }

  .project-tile {
    width: 320px;
    min-height: 315px;
    padding: 24px;
  }

  .project-tile-type {
    margin-top: 34px;
  }

  .project-tile strong {
    font-size: 22px;
  }

  .project-tile-description {
    margin-top: 15px;
    font-size: 12px;
  }
}


/* Refinement V2 — smooth one-page-at-a-time scrolling and centered signal */
html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

.hero,
.tools-section,
.projects-section,
.reliability {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.hero-system {
  width: min(1040px, 100%);
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.hero-system .reliability .system-node {
  flex: 0 0 auto;
}

.hero-system .system-link {
  flex: 1 1 150px;
  max-width: 190px;
}

.project-shot:first-child {
  grid-column: 1 / -1;
}

.project-shot:first-child img {
  width: 100%;
  max-height: 680px;
  object-fit: contain;
  background: #071018;
}

@media (max-width: 760px) {
  html { scroll-snap-type: y proximity; }
  .hero-system { width: 100%; }
  .hero-system .system-link {
    flex-basis: 34px;
    max-width: none;
  }
}

/* Selected Projects final four-project refinement */
.project-tile{min-height:360px}
@media(max-width:760px){.project-tile{min-height:335px}}


/* System Reliability Console */
.reliability {
  position: relative;
  padding: 112px 7vw 124px;
  border-top: 1px solid #171d29;
  border-bottom: 1px solid #171d29;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    #090d14;
  background-size: 64px 64px;
  overflow: hidden;
}

.reliability-wrap {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.reliability-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 72px;
  align-items: end;
}

.reliability-heading .section-eyebrow {
  margin: 0 0 18px;
  color: #7f8ba0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
}

.reliability-heading h2 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 600;
}

.reliability-heading h2 span { color: #7f8ba0; }

.reliability-intro {
  margin: 0 0 7px;
  color: #9aa5b6;
  font-size: 15px;
  line-height: 1.75;
}

.reliability .system-path {
  display: flex;
  align-items: center;
  margin: 72px 0 34px;
  padding: 22px 24px;
  border: 1px solid #202837;
  border-radius: 16px;
  background: rgba(12,17,26,.88);
}

.reliability .system-node {
  min-width: 116px;
  display: grid;
  gap: 4px;
}

.reliability .system-node span,
.reliability .system-node small {
  color: #68758a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .14em;
}

.reliability .system-node strong {
  color: #dbe2ec;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .1em;
}

.reliability .system-path > i {
  position: relative;
  flex: 1;
  height: 1px;
  min-width: 34px;
  margin: 0 16px;
  background: #2a3445;
}

.reliability .system-path > i::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #627089;
  border-right: 1px solid #627089;
  transform: rotate(45deg);
}

.reliability-console {
  border: 1px solid #242d3d;
  border-radius: 18px;
  overflow: hidden;
  background: #080c12;
  box-shadow: 0 30px 90px rgba(0,0,0,.26);
}

.console-topbar {
  min-height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid #202837;
  background: #0d121b;
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  color: #748197;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .12em;
}

.console-lights { display: flex; gap: 7px; }
.console-lights span {
  width: 7px;
  height: 7px;
  border: 1px solid #47536a;
  border-radius: 50%;
}
.console-mode { color: #56647a; }

.console-body { padding: 28px 30px 30px; }

.console-command {
  display: flex;
  gap: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid #18202d;
  color: #8794a9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.console-command .prompt { color: #dce4ef; }

.console-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 54px;
  padding: 22px 0 20px;
}

.check-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #141b26;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .06em;
}
.check-row span { color: #9aa6b8; }
.check-row i {
  flex: 1;
  height: 1px;
  border-top: 1px dotted #283244;
}
.check-row b {
  color: #d8e0eb;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
}

.console-summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid #202837;
  color: #637086;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .1em;
}
.console-summary strong {
  color: #cbd4e2;
  font-weight: 600;
}

.reliability-statement {
  max-width: 900px;
  margin: 42px 0 0;
  color: #7f8a9c;
  font-size: clamp(20px, 2.2vw, 29px);
  line-height: 1.5;
  letter-spacing: -.02em;
}
.reliability-statement strong {
  color: #e1e7ef;
  font-weight: 500;
}

@media (max-width: 800px) {
  .reliability { padding: 82px 24px 90px; }
  .reliability-heading {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .reliability .system-path {
    overflow-x: auto;
    padding: 20px;
  }
  .reliability .system-node { min-width: 104px; }
  .reliability .system-path > i { min-width: 32px; }
  .console-topbar {
    grid-template-columns: 70px 1fr;
  }
  .console-mode { display: none; }
  .console-body { padding: 22px 18px 24px; }
  .console-grid {
    grid-template-columns: 1fr;
    padding-top: 18px;
  }
  .console-summary {
    flex-direction: column;
    gap: 8px;
  }
}


/* Reliability viewport-fit refinement */
@media (min-width: 1000px) and (min-height: 720px) {
  .reliability {
    min-height: 100vh;
    padding: 54px 7vw 48px;
    display: flex;
    align-items: center;
  }

  .reliability-heading {
    gap: 56px;
  }

  .reliability-heading .section-eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .reliability-heading h2 {
    max-width: 760px;
    font-size: clamp(34px, 3.45vw, 54px);
    line-height: 1.02;
  }

  .reliability-intro {
    max-width: 520px;
    font-size: 14px;
    line-height: 1.6;
  }

  .reliability .system-path {
    margin: 34px 0 22px;
    padding: 16px 20px;
  }

  .reliability .system-node {
    gap: 2px;
  }

  .console-topbar {
    min-height: 40px;
  }

  .console-body {
    padding: 18px 28px 20px;
  }

  .console-command {
    padding-bottom: 14px;
    font-size: 11px;
  }

  .console-grid {
    padding: 12px 0 10px;
  }

  .check-row {
    min-height: 28px;
    font-size: 9px;
  }

  .console-summary {
    padding-top: 14px;
    font-size: 9px;
  }

  .reliability-statement {
    margin-top: 22px;
    max-width: 1040px;
    font-size: clamp(17px, 1.45vw, 22px);
    line-height: 1.4;
  }
}

/* Extra compression for common laptop-height viewports */
@media (min-width: 1000px) and (max-height: 820px) {
  .reliability {
    padding-top: 38px;
    padding-bottom: 34px;
  }

  .reliability-heading h2 {
    font-size: clamp(32px, 3vw, 46px);
  }

  .reliability .system-path {
    margin-top: 24px;
    margin-bottom: 16px;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .console-topbar {
    min-height: 36px;
  }

  .console-body {
    padding-top: 14px;
    padding-bottom: 16px;
  }

  .console-command {
    padding-bottom: 10px;
  }

  .console-grid {
    padding-top: 8px;
    padding-bottom: 7px;
  }

  .check-row {
    min-height: 24px;
  }

  .console-summary {
    padding-top: 10px;
  }

  .reliability-statement {
    margin-top: 16px;
    font-size: 17px;
  }
}


/* Reliability V2 refinement: preserve hero + improve desktop readability */
.reliability {
  background-position: 0 0;
}

/* Keep the grid visually aligned to the section's 64px system. */
.reliability::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent calc(100% - 1px), rgba(255,255,255,.012) calc(100% - 1px));
  background-size: 100% 64px;
  opacity: .35;
}

.reliability-wrap {
  position: relative;
  z-index: 1;
}

@media (min-width: 1000px) and (min-height: 720px) {
  .reliability {
    padding-top: 46px;
    padding-bottom: 42px;
  }

  .reliability-heading {
    align-items: center;
    gap: 72px;
  }

  .reliability-heading .section-eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
  }

  .reliability-heading h2 {
    max-width: 820px;
    font-size: clamp(38px, 3.75vw, 58px);
  }

  .reliability-intro {
    font-size: 15px;
    line-height: 1.65;
  }

  .reliability .system-path {
    margin-top: 28px;
    margin-bottom: 18px;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .console-topbar {
    min-height: 42px;
    font-size: 11px;
  }

  .console-body {
    padding: 18px 30px 20px;
  }

  .console-command {
    padding-bottom: 13px;
    font-size: 12px;
  }

  .console-grid {
    padding-top: 10px;
    padding-bottom: 9px;
  }

  .check-row {
    min-height: 29px;
    font-size: 11px;
  }

  .check-row b {
    font-size: 10px;
  }

  .console-summary {
    padding-top: 12px;
    font-size: 10px;
  }

  .reliability-statement {
    margin-top: 18px;
    font-size: clamp(18px, 1.45vw, 22px);
  }
}

@media (min-width: 1000px) and (max-height: 820px) {
  .reliability {
    padding-top: 32px;
    padding-bottom: 28px;
  }

  .reliability-heading h2 {
    font-size: clamp(36px, 3.35vw, 50px);
  }

  .reliability .system-path {
    margin-top: 20px;
    margin-bottom: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .console-topbar {
    min-height: 38px;
  }

  .console-body {
    padding-top: 12px;
    padding-bottom: 14px;
  }

  .console-command {
    padding-bottom: 8px;
  }

  .console-grid {
    padding-top: 6px;
    padding-bottom: 5px;
  }

  .check-row {
    min-height: 25px;
    font-size: 10.5px;
  }

  .check-row b {
    font-size: 9.5px;
  }

  .console-summary {
    padding-top: 8px;
  }

  .reliability-statement {
    margin-top: 12px;
    font-size: 18px;
  }
}


/* Reliability V3 — spacing/readability pass */
@media (min-width: 1000px) {
  .reliability {
    /* Start the grid exactly at this section's top edge. */
    background-position: 0 0;
    align-items: flex-start;
  }

  .reliability-wrap {
    margin-top: 0;
  }

  .reliability-heading {
    align-items: center;
  }

  .console-topbar {
    font-size: 12px;
    letter-spacing: .11em;
  }

  .console-command {
    font-size: 13px;
  }

  .check-row {
    font-size: 12px;
    letter-spacing: .055em;
  }

  .check-row b {
    font-size: 11px;
  }

  .console-summary {
    font-size: 11px;
  }
}

@media (min-width: 1000px) and (min-height: 821px) {
  .reliability {
    padding-top: 28px;
    padding-bottom: 30px;
  }

  .reliability-heading .section-eyebrow {
    margin-bottom: 11px;
  }

  .reliability-heading h2 {
    font-size: clamp(40px, 3.8vw, 58px);
  }

  .reliability .system-path {
    margin-top: 22px;
    margin-bottom: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .console-topbar {
    min-height: 46px;
  }

  .console-body {
    padding: 19px 30px 21px;
  }

  .console-command {
    padding-bottom: 14px;
  }

  .console-grid {
    padding-top: 11px;
    padding-bottom: 10px;
  }

  .check-row {
    min-height: 34px;
  }

  .console-summary {
    padding-top: 14px;
  }

  .reliability-statement {
    margin-top: 18px;
    font-size: clamp(19px, 1.5vw, 23px);
  }
}

@media (min-width: 1000px) and (max-height: 820px) {
  .reliability {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .reliability-heading .section-eyebrow {
    margin-bottom: 8px;
  }

  .reliability-heading h2 {
    font-size: clamp(36px, 3.25vw, 49px);
  }

  .reliability-intro {
    font-size: 14.5px;
  }

  .reliability .system-path {
    margin-top: 15px;
    margin-bottom: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .console-topbar {
    min-height: 40px;
    font-size: 11px;
  }

  .console-body {
    padding: 12px 28px 14px;
  }

  .console-command {
    padding-bottom: 8px;
    font-size: 12px;
  }

  .console-grid {
    padding-top: 6px;
    padding-bottom: 5px;
  }

  .check-row {
    min-height: 29px;
    font-size: 11px;
  }

  .check-row b {
    font-size: 10px;
  }

  .console-summary {
    padding-top: 8px;
    font-size: 10px;
  }

  .reliability-statement {
    margin-top: 10px;
    font-size: 18px;
  }
}


/* V4 — explicit layout correction */

/* HERO ONLY: center the LEAD → AI → CRM → AUTOMATION path more precisely. */
.hero > .system-path {
  position: relative;
  left: clamp(18px, 2.4vw, 42px);
}

/* RELIABILITY: remove the upper dead-space and spend it on readability. */
@media (min-width: 1000px) {
  .reliability {
    padding-top: 0 !important;
    padding-bottom: 22px;
    align-items: flex-start !important;
    background-position: 0 0 !important;
  }

  .reliability-wrap {
    margin-top: 0 !important;
    padding-top: 16px;
  }

  .reliability-heading {
    gap: 64px;
    align-items: center;
  }

  .reliability-heading .section-eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
  }

  .reliability-heading h2 {
    max-width: 860px;
    font-size: clamp(42px, 3.9vw, 60px);
    line-height: 1.01;
  }

  .reliability-intro {
    font-size: 16px;
    line-height: 1.65;
  }

  .reliability .system-path {
    margin-top: 18px;
    margin-bottom: 14px;
    padding: 15px 24px;
  }

  .reliability .system-node span,
  .reliability .system-node small {
    font-size: 10px;
  }

  .reliability .system-node strong {
    font-size: 13px;
  }

  .console-topbar {
    min-height: 46px;
    font-size: 12px;
  }

  .console-body {
    padding: 18px 30px 20px;
  }

  .console-command {
    padding-bottom: 12px;
    font-size: 14px;
  }

  .console-grid {
    column-gap: 64px;
    padding: 9px 0 9px;
  }

  .check-row {
    min-height: 36px;
    font-size: 13px;
    letter-spacing: .045em;
  }

  .check-row b {
    font-size: 12px;
    letter-spacing: .1em;
  }

  .console-summary {
    padding-top: 13px;
    font-size: 11px;
  }

  .reliability-statement {
    margin-top: 16px;
    font-size: clamp(20px, 1.55vw, 24px);
    line-height: 1.35;
  }
}

/* Preserve readability on shorter desktop/laptop screens without restoring
   the large blank top area. */
@media (min-width: 1000px) and (max-height: 820px) {
  .reliability-wrap {
    padding-top: 10px;
  }

  .reliability-heading h2 {
    font-size: clamp(38px, 3.35vw, 50px);
  }

  .reliability-intro {
    font-size: 15px;
  }

  .reliability .system-path {
    margin-top: 12px;
    margin-bottom: 10px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .console-topbar {
    min-height: 40px;
    font-size: 11px;
  }

  .console-body {
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .console-command {
    padding-bottom: 7px;
    font-size: 12.5px;
  }

  .console-grid {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .check-row {
    min-height: 30px;
    font-size: 11.5px;
  }

  .check-row b {
    font-size: 10.5px;
  }

  .console-summary {
    padding-top: 7px;
    font-size: 10px;
  }

  .reliability-statement {
    margin-top: 9px;
    font-size: 18px;
  }
}

@media (max-width: 999px) {
  .hero > .system-path {
    left: 0;
  }
}


/* V5 — annotated screenshot corrections */

/* HERO: center the entire LEAD → AI → CRM → AUTOMATION rail across the page. */
.hero > .system-path {
  left: clamp(90px, 8vw, 150px) !important;
}

/* RELIABILITY: eliminate the top dead band and use the full page area. */
@media (min-width: 1000px) {
  .reliability {
    min-height: 100vh;
    padding: 0 7vw 18px !important;
    align-items: flex-start !important;
    background-position: 0 0 !important;
  }

  .reliability-wrap {
    margin: 0 auto !important;
    padding-top: 8px !important;
  }

  .reliability-heading {
    gap: 70px;
    align-items: center;
  }

  .reliability-heading .section-eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
  }

  .reliability-heading h2 {
    max-width: 880px;
    font-size: clamp(44px, 4vw, 62px);
    line-height: 1.01;
  }

  .reliability-intro {
    max-width: 560px;
    margin-bottom: 0;
    font-size: 17px;
    line-height: 1.62;
  }

  .reliability .system-path {
    margin: 18px 0 14px;
    padding: 17px 26px;
  }

  .reliability .system-node span,
  .reliability .system-node small {
    font-size: 11px;
  }

  .reliability .system-node strong {
    font-size: 14px;
  }

  .console-topbar {
    min-height: 50px;
    font-size: 13px;
  }

  .console-body {
    padding: 20px 32px 22px;
  }

  .console-command {
    padding-bottom: 14px;
    font-size: 15px;
  }

  .console-grid {
    column-gap: 68px;
    padding: 10px 0 10px;
  }

  .check-row {
    min-height: 40px;
    font-size: 14px;
    letter-spacing: .04em;
  }

  .check-row b {
    font-size: 13px;
    letter-spacing: .09em;
  }

  .console-summary {
    padding-top: 15px;
    font-size: 12px;
  }

  .reliability-statement {
    margin-top: 18px;
    max-width: 1120px;
    font-size: clamp(21px, 1.65vw, 25px);
    line-height: 1.35;
  }
}

/* Laptop-height balancing: keep the new larger type but trim only spacing. */
@media (min-width: 1000px) and (max-height: 820px) {
  .reliability-wrap {
    padding-top: 4px !important;
  }

  .reliability-heading h2 {
    font-size: clamp(40px, 3.5vw, 52px);
  }

  .reliability-intro {
    font-size: 15.5px;
  }

  .reliability .system-path {
    margin: 11px 0 9px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .console-topbar {
    min-height: 42px;
    font-size: 11.5px;
  }

  .console-body {
    padding: 11px 29px 13px;
  }

  .console-command {
    padding-bottom: 8px;
    font-size: 13px;
  }

  .console-grid {
    padding: 4px 0;
  }

  .check-row {
    min-height: 31px;
    font-size: 12px;
  }

  .check-row b {
    font-size: 11px;
  }

  .console-summary {
    padding-top: 8px;
    font-size: 10.5px;
  }

  .reliability-statement {
    margin-top: 9px;
    font-size: 18.5px;
  }
}

@media (max-width: 999px) {
  .hero > .system-path {
    left: 0 !important;
  }
}


/* V6 — Reliability spacing balance only */
@media (min-width: 1000px) {
  .reliability-wrap {
    padding-top: 38px !important;
  }

  .reliability .system-path {
    margin-top: 24px;
    margin-bottom: 18px;
  }
}

/* Keep shorter laptop viewports balanced without compressing typography. */
@media (min-width: 1000px) and (max-height: 820px) {
  .reliability-wrap {
    padding-top: 30px !important;
  }

  .reliability .system-path {
    margin-top: 18px;
    margin-bottom: 14px;
  }
}


/* V7 — Reliability vertical rhythm refinement */
@media (min-width: 1000px) {
  /* Slightly more breathing room above the heading group. */
  .reliability-wrap {
    padding-top: 48px !important;
  }

  /* Clearer separation: header -> architecture rail. */
  .reliability .system-path {
    margin-top: 34px;
    margin-bottom: 22px;
  }

  /* Clearer separation: architecture rail -> diagnostic table. */
  .reliability-console {
    margin-top: 0;
  }

  /* Slightly more room before the closing engineering statement. */
  .reliability-statement {
    margin-top: 22px;
  }
}

@media (min-width: 1000px) and (max-height: 820px) {
  .reliability-wrap {
    padding-top: 38px !important;
  }

  .reliability .system-path {
    margin-top: 26px;
    margin-bottom: 18px;
  }

  .reliability-statement {
    margin-top: 14px;
  }
}


/* V8 — Reliability architecture connector alignment */
@media (min-width: 1000px) {
  .reliability .system-path > i {
    align-self: flex-start;
    margin-top: 29px;
  }

  .reliability .system-path > i::after {
    top: -3px;
  }
}

@media (min-width: 1000px) and (max-height: 820px) {
  .reliability .system-path > i {
    margin-top: 27px;
  }
}


/* V9 — Reliability connector length */
@media (min-width: 1000px) {
  .reliability .system-path > i {
    margin-left: 5px;
    margin-right: 5px;
  }
}


/* V10 — final Reliability architecture rail */
@media (min-width: 1000px) {
  .reliability .system-path > i {
    margin-left: 5px;
    margin-right: 14px;
  }
}


/* Automation Deployment Map — V1 static shell */
.deployment-map {
  position: relative;
  min-height: 100vh;
  padding: 72px 7vw 68px;
  border-top: 1px solid #171d29;
  border-bottom: 1px solid #171d29;
  background:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px),
    #090d14;
  background-size: 64px 64px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}

.deployment-wrap {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.deployment-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 72px;
  align-items: end;
}

.deployment-heading .section-eyebrow {
  margin: 0 0 14px;
  color: #7f8ba0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
}

.deployment-heading h2 {
  margin: 0;
  max-width: 800px;
  color: #eef2f7;
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 600;
}

.deployment-heading h2 span { color: #7f8ba0; }

.deployment-intro {
  margin: 0 0 5px;
  color: #9aa5b6;
  font-size: 15px;
  line-height: 1.7;
}

.deployment-board {
  display: grid;
  grid-template-columns: minmax(270px, .95fr) 90px minmax(240px, .8fr) 90px minmax(270px, .95fr);
  align-items: stretch;
  margin-top: 46px;
  min-height: 390px;
  border: 1px solid #242d3d;
  border-radius: 20px;
  background: rgba(8,12,18,.9);
  overflow: hidden;
}

.deployment-sources {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  padding: 18px 0;
}

.deployment-source {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid #171f2b;
}

.deployment-source:last-child { border-bottom: 0; }

.deployment-source > span,
.outcome-row > span {
  color: #647188;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .12em;
}

.deployment-source div {
  display: grid;
  gap: 5px;
}

.deployment-source strong,
.outcome-row strong {
  color: #dce3ed;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .08em;
}

.deployment-source small {
  color: #6f7c91;
  font-size: 11px;
  letter-spacing: .02em;
}

.deployment-flow {
  position: relative;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  padding: 18px 0;
}

.deployment-flow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 68%;
  background: #293446;
  transform: translateY(-50%);
}

.deployment-flow span {
  position: relative;
  align-self: center;
  height: 1px;
  background: #354155;
}

.deployment-flow span::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #697890;
  border-right: 1px solid #697890;
  transform: rotate(45deg);
}

.deployment-core {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 220px;
  height: 220px;
  border: 1px solid #334056;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0c111a;
}

.core-orbit {
  position: absolute;
  border: 1px solid #202a39;
  border-radius: 50%;
  pointer-events: none;
}

.orbit-one { inset: 16px; }
.orbit-two { inset: 38px; }

.deployment-core p,
.deployment-outcomes > p {
  position: relative;
  z-index: 1;
  margin: 0 0 9px;
  color: #6f7d93;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .16em;
}

.deployment-core strong {
  position: relative;
  z-index: 1;
  color: #edf2f8;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.deployment-core small {
  position: relative;
  z-index: 1;
  margin-top: 9px;
  color: #758297;
  font-size: 10px;
}

.deployment-output-line {
  position: relative;
  align-self: center;
  height: 1px;
  background: #354155;
}

.deployment-output-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-top: 1px solid #697890;
  border-right: 1px solid #697890;
  transform: rotate(45deg);
}

.deployment-outcomes {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.deployment-outcomes > p {
  margin-bottom: 14px;
}

.outcome-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  border-top: 1px solid #171f2b;
}

.outcome-row:last-child {
  border-bottom: 1px solid #171f2b;
}

.deployment-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  color: #69768a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .12em;
}

.deployment-footer i {
  flex: 1;
  height: 1px;
  background: #242e3e;
}

@media (max-width: 999px) {
  .deployment-map {
    min-height: auto;
    padding: 82px 24px 90px;
  }

  .deployment-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .deployment-board {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .deployment-flow,
  .deployment-output-line {
    display: none;
  }

  .deployment-sources {
    padding: 0;
  }

  .deployment-source {
    min-height: 74px;
  }

  .deployment-core {
    margin: 34px auto;
  }

  .deployment-outcomes {
    border-top: 1px solid #242d3d;
  }

  .deployment-footer {
    flex-wrap: wrap;
  }

  .deployment-footer i {
    min-width: 28px;
  }
}


/* Deployment Map V2 — one-screen composition refinement */
@media (min-width: 1000px) {
  .deployment-map {
    padding-top: 46px;
    padding-bottom: 34px;
  }

  .deployment-heading h2 {
    font-size: clamp(36px, 3.65vw, 56px);
  }

  .deployment-board {
    margin-top: 30px;
    min-height: 430px;
  }

  .deployment-sources {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .deployment-flow {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .deployment-source strong,
  .outcome-row strong {
    font-size: 12px;
  }

  .deployment-source small {
    font-size: 12px;
  }

  .deployment-outcomes {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .outcome-row {
    min-height: 54px;
  }

  .deployment-footer {
    margin-top: 18px;
    padding-bottom: 4px;
  }
}

@media (min-width: 1000px) and (max-height: 820px) {
  .deployment-map {
    padding-top: 30px;
    padding-bottom: 24px;
  }

  .deployment-heading h2 {
    font-size: clamp(34px, 3.25vw, 49px);
  }

  .deployment-intro {
    font-size: 14px;
  }

  .deployment-board {
    margin-top: 22px;
    min-height: 390px;
  }

  .outcome-row {
    min-height: 48px;
  }

  .deployment-footer {
    margin-top: 12px;
  }
}


/* Deployment Map V3 — interactive process tracing */
@media (hover: hover) and (pointer: fine) {
  .deployment-source,
  .outcome-row,
  .deployment-flow span,
  .deployment-core,
  .deployment-output-line {
    transition:
      opacity 220ms ease,
      color 220ms ease,
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease,
      transform 220ms ease;
  }

  .deployment-source {
    cursor: default;
    outline: none;
  }

  .deployment-board.is-tracing .deployment-source,
  .deployment-board.is-tracing .outcome-row {
    opacity: .28;
  }

  .deployment-board.is-tracing .deployment-source.is-route-active,
  .deployment-board.is-tracing .outcome-row.is-route-active {
    opacity: 1;
  }

  .deployment-board.is-tracing .deployment-source.is-route-active {
    background: rgba(132, 162, 207, .045);
  }

  .deployment-board.is-tracing .deployment-source.is-route-active strong,
  .deployment-board.is-tracing .outcome-row.is-route-active strong {
    color: #f5f8fc;
  }

  .deployment-board.is-tracing .deployment-source.is-route-active small {
    color: #9db5d7;
  }

  .deployment-board.is-tracing .deployment-flow span {
    opacity: .18;
  }

  .deployment-board.is-tracing .deployment-flow span.is-route-active {
    opacity: 1;
    background: #8298b8;
    box-shadow: 0 0 12px rgba(145, 177, 221, .22);
  }

  .deployment-board.is-tracing .deployment-flow span.is-route-active::after {
    border-color: #a9bdd8;
  }

  .deployment-board.is-tracing .deployment-core {
    border-color: #617797;
    box-shadow:
      0 0 0 1px rgba(128, 157, 198, .08),
      0 0 32px rgba(91, 126, 176, .10);
    transform: scale(1.015);
  }

  .deployment-board.is-tracing .deployment-core .core-orbit {
    border-color: #3d506b;
  }

  .deployment-board.is-tracing .deployment-core strong {
    color: #ffffff;
  }

  .deployment-board.is-tracing .deployment-output-line {
    background: #8298b8;
    box-shadow: 0 0 12px rgba(145, 177, 221, .20);
  }

  .deployment-board.is-tracing .deployment-output-line::after {
    border-color: #a9bdd8;
  }

  .deployment-source:focus-visible {
    box-shadow: inset 0 0 0 1px #526987;
  }
}


/* Deployment Map V4 — stronger active trace, locked geometry */
@media (hover: hover) and (pointer: fine) {
  .deployment-board.is-tracing .deployment-flow span.is-route-active {
    opacity: 1;
    background: #b2c6e3;
    box-shadow:
      0 0 7px rgba(170, 199, 238, .38),
      0 0 18px rgba(113, 154, 211, .18);
  }

  .deployment-board.is-tracing .deployment-flow span.is-route-active::after {
    border-color: #d4e2f4;
    filter: drop-shadow(0 0 3px rgba(185, 211, 245, .42));
  }

  .deployment-board.is-tracing .deployment-output-line {
    background: #b2c6e3;
    box-shadow:
      0 0 7px rgba(170, 199, 238, .34),
      0 0 18px rgba(113, 154, 211, .16);
  }

  .deployment-board.is-tracing .deployment-output-line::after {
    border-color: #d4e2f4;
    filter: drop-shadow(0 0 3px rgba(185, 211, 245, .4));
  }

  .deployment-board.is-tracing .deployment-core {
    border-color: #7188a9;
    box-shadow:
      0 0 0 1px rgba(143, 174, 216, .12),
      0 0 30px rgba(91, 126, 176, .14);
    animation: deployment-core-pulse 1.8s ease-in-out infinite;
  }

  .deployment-board.is-tracing .deployment-core .orbit-one {
    border-color: #4c6280;
    animation: deployment-orbit-pulse 1.8s ease-in-out infinite;
  }

  .deployment-board.is-tracing .deployment-core .orbit-two {
    border-color: #394d68;
    animation: deployment-orbit-pulse 1.8s ease-in-out .16s infinite;
  }

  .deployment-board.is-tracing .outcome-row.is-route-active {
    background: linear-gradient(90deg, rgba(127, 157, 199, .055), transparent 72%);
  }

  .deployment-board.is-tracing .outcome-row.is-route-active strong {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(172, 200, 237, .16);
  }

  @keyframes deployment-core-pulse {
    0%, 100% {
      box-shadow:
        0 0 0 1px rgba(143, 174, 216, .10),
        0 0 24px rgba(91, 126, 176, .10);
    }
    50% {
      box-shadow:
        0 0 0 1px rgba(143, 174, 216, .17),
        0 0 38px rgba(91, 126, 176, .18);
    }
  }

  @keyframes deployment-orbit-pulse {
    0%, 100% { opacity: .72; }
    50% { opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .deployment-board.is-tracing .deployment-core,
  .deployment-board.is-tracing .deployment-core .core-orbit {
    animation: none !important;
  }
}


/* Deployment Map V5 — top breathing room */
@media (min-width: 1000px) {
  .deployment-map {
    padding-top: 72px;
  }
}

@media (min-width: 1000px) and (max-height: 820px) {
  .deployment-map {
    padding-top: 52px;
  }
}


/* Operations DNA — V1 static shell */
.operations-dna {
  position: relative;
  min-height: 100vh;
  padding: 72px 7vw 58px;
  border-top: 1px solid #171d29;
  border-bottom: 1px solid #171d29;
  background:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px),
    #090d14;
  background-size: 64px 64px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}

.operations-dna-wrap {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.operations-dna-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 72px;
  align-items: end;
}

.operations-dna-heading .section-eyebrow {
  margin: 0 0 14px;
  color: #7f8ba0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
}

.operations-dna-heading h2 {
  margin: 0;
  max-width: 790px;
  color: #eef2f7;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 600;
}

.operations-dna-heading h2 span { color: #7f8ba0; }

.operations-dna-intro {
  margin: 0 0 5px;
  color: #9aa5b6;
  font-size: 15px;
  line-height: 1.7;
}

.dna-system {
  margin-top: 42px;
  border: 1px solid #242d3d;
  border-radius: 20px;
  background: rgba(8,12,18,.9);
  overflow: hidden;
}

.dna-rail {
  display: grid;
  grid-template-columns: minmax(0,1fr) 70px minmax(0,1fr) 70px minmax(0,1fr) 70px minmax(0,1fr);
  align-items: stretch;
  min-height: 188px;
  border-bottom: 1px solid #242d3d;
}

.dna-stage {
  position: relative;
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dna-index {
  position: absolute;
  top: 18px;
  left: 22px;
  color: #637087;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .14em;
}

.dna-node {
  position: relative;
  padding-left: 24px;
}

.dna-node-dot {
  position: absolute;
  left: 0;
  top: 28px;
  width: 7px;
  height: 7px;
  border: 1px solid #61718a;
  border-radius: 50%;
  background: #0b1018;
}

.dna-node p,
.dna-evidence-primary > p {
  margin: 0 0 8px;
  color: #69778d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .16em;
}

.dna-node h3 {
  margin: 0;
  color: #e4eaf2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  letter-spacing: .06em;
}

.dna-node small {
  display: block;
  margin-top: 9px;
  color: #78869b;
  font-size: 11px;
  line-height: 1.45;
}

.dna-node-current .dna-node-dot {
  border-color: #a6bad6;
  background: #c2d2e8;
  box-shadow: 0 0 12px rgba(163,192,230,.28);
}

.dna-connector {
  position: relative;
  display: flex;
  align-items: center;
}

.dna-connector span {
  width: 100%;
  height: 1px;
  background: #354155;
  position: relative;
}

.dna-connector span::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 7px;
  height: 7px;
  border-top: 1px solid #697890;
  border-right: 1px solid #697890;
  transform: rotate(45deg);
}

.dna-evidence {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  min-height: 260px;
}

.dna-evidence-primary {
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #242d3d;
}

.dna-evidence-primary blockquote {
  margin: 0;
  max-width: 500px;
  color: #e9eef5;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.35;
  letter-spacing: -.025em;
}

.dna-signals {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.dna-signal {
  padding: 28px 30px;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-content: center;
  column-gap: 10px;
  border-bottom: 1px solid #1b2431;
  border-right: 1px solid #1b2431;
}

.dna-signal:nth-child(2n) { border-right: 0; }
.dna-signal:nth-child(n+3) { border-bottom: 0; }

.dna-signal span {
  grid-row: 1 / 3;
  color: #647188;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .12em;
}

.dna-signal strong {
  color: #dfe6ef;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .07em;
}

.dna-signal small {
  margin-top: 7px;
  color: #77859a;
  font-size: 11px;
  line-height: 1.5;
}

.dna-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  color: #69768a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .12em;
}

.dna-footer i {
  flex: 1;
  height: 1px;
  background: #242e3e;
}

@media (max-width: 999px) {
  .operations-dna {
    min-height: auto;
    padding: 82px 24px 90px;
  }

  .operations-dna-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dna-rail {
    grid-template-columns: 1fr;
  }

  .dna-connector {
    height: 42px;
    width: 1px;
    margin-left: 48px;
    background: #354155;
  }

  .dna-connector span { display: none; }

  .dna-stage {
    min-height: 145px;
  }

  .dna-evidence {
    grid-template-columns: 1fr;
  }

  .dna-evidence-primary {
    border-right: 0;
    border-bottom: 1px solid #242d3d;
  }

  .dna-signals {
    grid-template-columns: 1fr;
  }

  .dna-signal,
  .dna-signal:nth-child(2n),
  .dna-signal:nth-child(n+3) {
    min-height: 118px;
    border-right: 0;
    border-bottom: 1px solid #1b2431;
  }

  .dna-signal:last-child { border-bottom: 0; }

  .dna-footer {
    flex-wrap: wrap;
  }
}


/* Hero portrait circle — V2. Uses the original portrait inside the existing right-side circle. */
.hero::after {
  display: none;
}

.hero-portrait-circle {
  position: absolute;
  z-index: 0;
  width: 560px;
  height: 560px;
  right: -92px;
  top: 5%;
  border: 1px solid #283248;
  border-radius: 50%;
  overflow: hidden;
  background: #0b1018;
  opacity: 0.94;
  pointer-events: none;
}

.hero-portrait-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 80px 0 100px rgba(8, 12, 19, 0.50), inset 0 -54px 80px rgba(8, 12, 19, 0.24);
  pointer-events: none;
}

.hero-portrait-circle img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 34%;
}

@media (max-width: 1180px) {
  .hero-portrait-circle {
    width: 460px;
    height: 460px;
    right: -150px;
    top: 9%;
    opacity: 0.72;
  }
}

@media (max-width: 900px) {
  .hero-portrait-circle {
    display: none;
  }
}


/* Operations DNA V3 — desktop one-screen fit
   Geometry only: preserve content, typography language, arrows and layout. */
@media (min-width: 1101px) and (min-height: 760px) {
  #operations-dna {
    min-height: 100vh;
    box-sizing: border-box;
    padding-top: 42px;
    padding-bottom: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  #operations-dna .section-head,
  #operations-dna .operations-dna-head {
    margin-bottom: 30px;
  }

  #operations-dna .operations-dna-shell,
  #operations-dna .dna-shell,
  #operations-dna .operations-panel {
    flex: 0 0 auto;
  }

  #operations-dna .operations-dna-flow,
  #operations-dna .dna-flow,
  #operations-dna .operations-flow {
    min-height: 210px;
    padding-top: 26px;
    padding-bottom: 26px;
  }

  #operations-dna .operations-dna-bottom,
  #operations-dna .dna-bottom,
  #operations-dna .operations-principles {
    min-height: 238px;
  }

  #operations-dna .operations-dna-principle,
  #operations-dna .dna-principle,
  #operations-dna .principle-card {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

/* Tighter fit for common 1080p browser viewports after browser chrome. */
@media (min-width: 1101px) and (max-height: 900px) {
  #operations-dna {
    padding-top: 30px;
    padding-bottom: 20px;
  }

  #operations-dna .section-head,
  #operations-dna .operations-dna-head {
    margin-bottom: 22px;
  }

  #operations-dna .operations-dna-flow,
  #operations-dna .dna-flow,
  #operations-dna .operations-flow {
    min-height: 188px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #operations-dna .operations-dna-bottom,
  #operations-dna .dna-bottom,
  #operations-dna .operations-principles {
    min-height: 215px;
  }

  #operations-dna .operations-dna-principle,
  #operations-dna .dna-principle,
  #operations-dna .principle-card {
    padding-top: 22px;
    padding-bottom: 22px;
  }
}


/* V4 final corrections
   1) Operations DNA: make the bottom progression rail visible on first landing.
   2) Hero: slightly reduce the portrait inside the existing circle only. */

@media (min-width: 1101px) {
  /* Keep the section landing high enough that its final rail is visible
     without requiring a second scroll. */
  #operations-dna {
    scroll-margin-top: 0;
    min-height: 100vh;
    padding-top: 24px;
    padding-bottom: 12px;
  }

  #operations-dna .section-head,
  #operations-dna .operations-dna-head {
    margin-bottom: 18px;
  }

  #operations-dna .operations-dna-flow,
  #operations-dna .dna-flow,
  #operations-dna .operations-flow {
    min-height: 180px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  #operations-dna .operations-dna-bottom,
  #operations-dna .dna-bottom,
  #operations-dna .operations-principles {
    min-height: 202px;
  }

  #operations-dna .operations-dna-principle,
  #operations-dna .dna-principle,
  #operations-dna .principle-card {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  /* Preserve the circle itself and its position; give the portrait
     a little more breathing room inside it. */
  .hero-photo-circle img,
  .hero-portrait-circle img,
  .hero-circle img {
    transform: scale(0.94);
    transform-origin: center center;
  }
}

/* V5 — targeted corrections only */
@media (min-width: 1101px) {
  .hero-photo-circle img,
  .hero-portrait-circle img,
  .hero-circle img {
    transform: scale(0.985);
    transform-origin: center center;
  }

  #operations-dna {
    /* V24: align the snap landing with the true section top.
       V4 already compacts the section enough to keep the footer rail visible. */
    scroll-margin-top: 0;
  }
}


/* Deployment Map V6 — capability-first system layer.
   Remove only the vertical collector; preserve the five route arrows. */
@media (min-width: 1101px) {
  .deployment-flow::after {
    display: none;
  }

  .deployment-core strong {
    font-size: 16px;
    white-space: nowrap;
  }

  .deployment-core .core-stack {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: #66758c;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 7.5px;
    line-height: 1.35;
    letter-spacing: .055em;
    white-space: nowrap;
  }
}


/* Deployment Map V7 — clean System Layer
   Keep one outer boundary only; remove decorative inner rings. */
.deployment-core::before,
.deployment-core::after {
  display: none !important;
  content: none !important;
}

/* Remove any nested decorative ring elements if present,
   while preserving actual System Layer text. */
.deployment-core .core-ring,
.deployment-core .inner-ring,
.deployment-core .ring {
  display: none !important;
}

/* Tool stack removed from markup; keep selector inert for safety. */
.deployment-core .core-stack {
  display: none !important;
}


/* Deployment Map V8 — true single-circle System Layer */
.deployment-core .core-orbit,
.deployment-core .orbit-one,
.deployment-core .orbit-two {
  display: none !important;
  border: 0 !important;
}


/* =========================================================
   V11 — SYSTEM INTAKE / FINAL CONVERSION SECTION
   Dark-only. Built on the locked V8 baseline.
   ========================================================= */
.system-intake {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 82px 7vw 64px;
  display: flex;
  align-items: center;
  position: relative;
  border-top: 1px solid #1a2230;
}

.system-intake__inner {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
}

.system-intake__header {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  gap: 80px;
  align-items: end;
  margin-bottom: 46px;
}

.system-intake__eyebrow {
  margin: 0 0 20px;
  color: #7898c2;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .22em;
}

.system-intake h2 {
  margin: 0;
  max-width: 900px;
  color: #f1f4f8;
  font-size: clamp(48px, 4.8vw, 78px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 650;
}

.system-intake h2 span {
  color: #7f8b9f;
}

.system-intake__intro {
  margin: 0 0 6px;
  max-width: 560px;
  color: #8eadd4;
  font-size: 19px;
  line-height: 1.65;
}

.system-intake__panel {
  overflow: hidden;
  border: 1px solid #283242;
  border-radius: 24px;
  background: rgba(8, 13, 20, .66);
}

.system-intake__panelbar {
  min-height: 58px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  border-bottom: 1px solid #283242;
  color: #6f8cb1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .16em;
}

.system-intake__dots {
  display: flex;
  gap: 8px;
}

.system-intake__dots i {
  width: 8px;
  height: 8px;
  border: 1px solid #506078;
  border-radius: 50%;
}

.system-intake__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.system-intake__item {
  min-height: 190px;
  padding: 34px 30px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  align-content: center;
  border-right: 1px solid #222c3a;
}

.system-intake__item:last-child {
  border-right: 0;
}

.system-intake__number {
  color: #6887ad;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .12em;
}

.system-intake__item strong {
  display: block;
  margin-bottom: 12px;
  color: #edf2f8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: .07em;
}

.system-intake__item p {
  margin: 0;
  color: #7795bb;
  font-size: 15px;
  line-height: 1.55;
}

.system-intake__action {
  min-height: 112px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid #283242;
}

.system-intake__status {
  color: #8eadd4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}

.system-intake__action p {
  margin: 8px 0 0;
  color: #697b94;
  font-size: 14px;
}

.system-intake__cta {
  min-height: 58px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  gap: 30px;
  flex: 0 0 auto;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #eef2f7;
  color: #0b111a;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .055em;
  transition: transform .2s ease, background .2s ease;
}

.system-intake__cta:hover {
  transform: translateY(-2px);
  background: #ffffff;
}

.system-intake__cta span {
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 980px) {
  .system-intake {
    min-height: auto;
    padding: 76px 6vw;
  }

  .system-intake__header {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .system-intake__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .system-intake__item:nth-child(2) {
    border-right: 0;
  }

  .system-intake__item:nth-child(-n+2) {
    border-bottom: 1px solid #222c3a;
  }
}

@media (max-width: 640px) {
  .system-intake {
    padding: 64px 20px 48px;
  }

  .system-intake h2 {
    font-size: clamp(40px, 12vw, 56px);
  }

  .system-intake__intro {
    font-size: 16px;
  }

  .system-intake__panelbar {
    grid-template-columns: 60px 1fr;
    padding: 0 18px;
  }

  .system-intake__panelbar > span:last-child {
    display: none;
  }

  .system-intake__grid {
    grid-template-columns: 1fr;
  }

  .system-intake__item {
    min-height: 130px;
    padding: 26px 22px;
    border-right: 0;
    border-bottom: 1px solid #222c3a;
  }

  .system-intake__item:last-child {
    border-bottom: 0;
  }

  .system-intake__action {
    align-items: stretch;
    flex-direction: column;
    padding: 24px 22px;
  }

  .system-intake__cta {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
  }
}


/* =========================================================
   V12 — SYSTEM INTAKE SNAP FIX + TOOLS WORDMARK TREATMENT
   ========================================================= */

/* The final section must itself be a snap destination.
   Without this, mandatory scroll snapping can resolve back to Operations DNA. */
.system-intake {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Tools & Technologies — reference-inspired treatment:
   remove cards and present the tools as large, quiet brand marks. */
.tools-section {
  gap: 34px;
}

.tools-section .marquee {
  padding: 22px 0;
}

.tools-section .marquee-group {
  gap: 74px;
  padding-right: 74px;
}

.tools-section .tool-item {
  min-width: 220px;
  min-height: 82px;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8992a3;
  gap: 14px;
  font-size: 27px;
  font-weight: 700;
  opacity: .72;
  filter: grayscale(1);
  transition: opacity .2s ease, color .2s ease;
}

.tools-section .tool-item:hover {
  opacity: 1;
  color: #c3cad6;
}

.tools-section .tool-item img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  opacity: .9;
}

.tools-section .tool-item img[alt="HighLevel"] {
  width: 190px;
  height: 56px;
  max-width: 190px;
  flex: 0 0 190px;
  object-fit: contain;
  opacity: .82;
}

.tools-section .generic-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 0;
  border-radius: 0;
  color: #8992a3;
  font-size: 23px;
}

.tools-section .webhook-icon {
  font-size: 34px;
}

.tools-section .crm-icon {
  width: auto;
  flex-basis: auto;
  font-size: 19px;
  letter-spacing: .08em;
}

@media (max-width: 760px) {
  .tools-section {
    gap: 20px;
  }

  .tools-section .marquee-group {
    gap: 42px;
    padding-right: 42px;
  }

  .tools-section .tool-item {
    min-width: 170px;
    min-height: 64px;
    font-size: 21px;
  }

  .tools-section .tool-item img,
  .tools-section .generic-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .tools-section .tool-item img[alt="HighLevel"] {
    width: 150px;
    height: 46px;
    max-width: 150px;
    flex-basis: 150px;
  }
}


/* =========================================================
   V13 — HIGHLEVEL + ZAPIER REFERENCE-STYLE WORDMARKS
   Only these two tool marks are changed.
   ========================================================= */
.tools-section .brand-wordmark {
  min-width: 250px;
  gap: 8px;
  color: #858d9e;
  opacity: .78;
  filter: none;
  font-family: Arial, Helvetica, sans-serif;
}

.tools-section .brand-wordmark .brand-name {
  font-size: 31px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.055em;
}

/* HighLevel: simplified twin-building mark + wordmark */
.tools-section .brand-highlevel {
  justify-content: center;
  gap: 7px;
}

.highlevel-mark {
  position: relative;
  width: 42px;
  height: 39px;
  flex: 0 0 42px;
}

.highlevel-mark i {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 29px;
  background: currentColor;
}

.highlevel-mark i:first-child { left: 7px; }
.highlevel-mark i:last-child  { left: 25px; }

.highlevel-mark i::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -7px;
  width: 18px;
  height: 18px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 48%, 72% 48%, 72% 100%, 28% 100%, 28% 48%, 0 48%);
}

/* Zapier: reference uses the recognizable leading underscore + lowercase wordmark */
.tools-section .brand-zapier {
  justify-content: center;
  gap: 2px;
}

.zapier-mark {
  width: 30px;
  height: 5px;
  flex: 0 0 30px;
  margin-top: 17px;
  background: currentColor;
}

.tools-section .brand-zapier .brand-name {
  font-size: 35px;
  letter-spacing: -.075em;
}

@media (max-width: 760px) {
  .tools-section .brand-wordmark {
    min-width: 190px;
  }

  .tools-section .brand-wordmark .brand-name {
    font-size: 24px;
  }

  .highlevel-mark {
    width: 34px;
    height: 32px;
    flex-basis: 34px;
    transform: scale(.82);
    transform-origin: center;
  }

  .zapier-mark {
    width: 24px;
    flex-basis: 24px;
    margin-top: 13px;
  }

  .tools-section .brand-zapier .brand-name {
    font-size: 27px;
  }
}


/* =========================================================
   V14 — HERO SECONDARY CTA HOVER
   Keep primary/secondary hierarchy at rest.
   ========================================================= */
.hero .button-secondary {
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.hero .button-secondary:hover,
.hero .button-secondary:focus-visible {
  background: #eef2f7;
  color: #0b111a;
  border-color: #eef2f7;
  transform: translateY(-1px);
}


/* =========================================================
   V15 — GLOBAL INTERACTIVE BUTTON HOVER
   Match the Hero "Book a Discovery Call" interaction.
   ========================================================= */

/* Apply the same transition language to clickable CTA/button surfaces. */
.button,
.system-intake__cta,
.project-card button,
.project-modal button,
.modal-close,
.project-link {
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

/* Outlined/dark buttons become light on hover/focus. */
.button-secondary:hover,
.button-secondary:focus-visible,
.project-card button:hover,
.project-card button:focus-visible,
.project-modal button:hover,
.project-modal button:focus-visible,
.modal-close:hover,
.modal-close:focus-visible,
.project-link:hover,
.project-link:focus-visible {
  background: #eef2f7;
  color: #0b111a;
  border-color: #eef2f7;
  transform: translateY(-1px);
}

/* Already-light CTAs retain their light treatment and gain the same motion cue. */
.button-primary:hover,
.button-primary:focus-visible,
.system-intake__cta:hover,
.system-intake__cta:focus-visible {
  background: #ffffff;
  color: #0b111a;
  border-color: #ffffff;
  transform: translateY(-1px);
}


/* =========================================================
   V16 — UNIFIED CTA DEFAULT + HOVER
   All CTAs use the Hero secondary-button appearance at rest,
   then become light only on hover/focus.
   ========================================================= */

/* Default state: dark background, subtle border, light text. */
.button,
.button-primary,
.button-secondary,
.system-intake__cta,
.project-card button,
.project-modal button,
.modal-close,
.project-link {
  background: #0e131d;
  color: #edf2f8;
  border-color: #303b4d;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

/* Hover/focus state: highlighted exactly as an interaction cue. */
.button:hover,
.button:focus-visible,
.button-primary:hover,
.button-primary:focus-visible,
.button-secondary:hover,
.button-secondary:focus-visible,
.system-intake__cta:hover,
.system-intake__cta:focus-visible,
.project-card button:hover,
.project-card button:focus-visible,
.project-modal button:hover,
.project-modal button:focus-visible,
.modal-close:hover,
.modal-close:focus-visible,
.project-link:hover,
.project-link:focus-visible {
  background: #eef2f7;
  color: #0b111a;
  border-color: #eef2f7;
  transform: translateY(-1px);
}


/* =========================================================
   V17 — OPENAI WORDMARK TREATMENT
   Matches the locked HighLevel / Zapier brand presentation.
   ========================================================= */
.tools-section .brand-openai {
  min-width: 220px;
  justify-content: center;
  gap: 11px;
  color: #858d9e;
  opacity: .78;
  filter: none;
  font-family: Arial, Helvetica, sans-serif;
}

.tools-section .brand-openai img {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  object-fit: contain;
  opacity: 1;
}

.tools-section .brand-openai .brand-name {
  font-size: 31px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.055em;
}

.tools-section .brand-openai:hover {
  opacity: 1;
  color: #c3cad6;
}

@media (max-width: 760px) {
  .tools-section .brand-openai {
    min-width: 175px;
    gap: 9px;
  }

  .tools-section .brand-openai img {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  .tools-section .brand-openai .brand-name {
    font-size: 24px;
  }
}


/* =========================================================
   V19 — MOBILE HERO VERTICAL RHYTHM
   Mobile only. Tightens the excess space below the system path.
   Desktop/tablet layouts remain unchanged.
   ========================================================= */
@media (max-width: 700px) {
  .hero {
    min-height: auto;
    padding-bottom: 38px;
  }

  .hero-system,
  .hero > .system-path {
    margin-bottom: 0;
  }
}


/* =========================================================
   V20 — MOBILE HERO PORTRAIT
   Desktop portrait remains untouched. Mobile gets its own
   compact portrait between the CTAs and system path.
   ========================================================= */
.hero-mobile-portrait {
  display: none;
}

@media (max-width: 700px) {
  .hero-mobile-portrait {
    position: relative;
    display: block;
    width: min(82vw, 320px);
    height: 250px;
    margin: 30px auto 0;
    overflow: hidden;
    border-radius: 22px;
    background: #0b1018;
    pointer-events: none;

    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    mask-composite: intersect;
  }

  .hero-mobile-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 28%;
    transform: scale(1.04);
  }

  .hero-system {
    margin-top: 24px;
  }
}


/* =========================================================
   V21 — MOBILE SELECTED PROJECTS: ONE CARD PER VIEW
   Mobile only. Keeps horizontal swipe, but gives each project
   a clean centered snap position with no accidental half-card.
   ========================================================= */
@media (max-width: 700px) {
  .projects-track,
  .project-track,
  .projects-row {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    gap: 14px;
  }

  .projects-track > .project-card,
  .project-track > .project-card,
  .projects-row > .project-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}


/* =========================================================
   V22 — MOBILE LAYOUT REFINEMENT
   1) Selected Projects: real one-card native swipe/snap
   2) Selected Projects: preserve a full section boundary
   3) Deployment Map footer: intentional 3-row legend
   4) Operations DNA footer: intentional 3-row legend
   Desktop remains unchanged.
   ========================================================= */
@media (max-width: 700px) {

  /* ---------- Selected Projects ---------- */
  .projects-section {
    min-height: 100svh !important;
    box-sizing: border-box;
    padding-bottom: 88px !important;
    overflow: hidden;
  }

  .project-marquee {
    width: 100%;
    box-sizing: border-box;
    padding-inline: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: none;
    -webkit-mask-image: none;
    overscroll-behavior-x: contain;
  }

  .project-marquee::-webkit-scrollbar {
    display: none;
  }

  .project-marquee-track {
    width: 100%;
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }

  /* JS creates duplicate groups for the desktop marquee.
     Mobile needs only the original group for deliberate swipe behavior. */
  .project-marquee-group {
    flex: 0 0 100%;
    width: 100%;
    gap: 14px;
    padding-right: 0;
  }

  .project-marquee-group[aria-hidden="true"] {
    display: none;
  }

  .project-marquee-group > .project-tile {
    flex: 0 0 100%;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* ---------- Deployment Map footer ---------- */
  .deployment-footer {
    display: grid;
    grid-template-columns: max-content minmax(24px, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    flex-wrap: initial;
    width: 100%;
    margin-top: 22px;
  }

  .deployment-footer i {
    width: 100%;
    min-width: 0;
  }

  .deployment-footer::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #242e3e;
  }

  /* ---------- Operations DNA footer ---------- */
  .dna-footer {
    display: grid;
    grid-template-columns: max-content minmax(24px, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    flex-wrap: initial;
    width: 100%;
    margin-top: 22px;
  }

  .dna-footer i {
    width: 100%;
    min-width: 0;
  }

  .dna-footer::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #242e3e;
  }
}


/* =========================================================
   V23 — MOBILE TOOLS MARQUEE REGRESSION FIX
   Projects remain manual swipe/snap.
   Tools retain their locked continuous marquee animation.
   ========================================================= */
@media (max-width: 700px) {
  .tools-section .marquee-right .marquee-track {
    animation: move-right 22s linear infinite !important;
    will-change: transform;
  }

  .tools-section .marquee-left .marquee-track {
    animation: move-left 22s linear infinite !important;
    will-change: transform;
  }

  .tools-section .marquee {
    overflow: hidden;
  }

  .tools-section .marquee-group[aria-hidden="true"] {
    display: flex;
  }
}

/* V25 — Operations DNA desktop viewport balance.
   Targeted geometry only: keep the approved design/content while fitting
   both the full header and bottom progression rail in common desktop heights. */
@media (min-width: 1101px) {
  #operations-dna .dna-system {
    margin-top: 28px;
  }

  #operations-dna .dna-rail {
    min-height: 176px;
  }

  #operations-dna .dna-evidence {
    min-height: 244px;
  }

  #operations-dna .dna-footer {
    margin-top: 14px;
  }
}

@media (min-width: 1101px) and (max-height: 900px) {
  #operations-dna {
    padding-top: 22px;
    padding-bottom: 8px;
  }

  #operations-dna .dna-system {
    margin-top: 24px;
  }

  #operations-dna .dna-rail {
    min-height: 168px;
  }

  #operations-dna .dna-evidence {
    min-height: 232px;
  }

  #operations-dna .dna-footer {
    margin-top: 10px;
  }
}

/* =========================================================
   V27 — MOBILE SELECTED PROJECTS: EDGE SNAP BALANCE
   Adds trailing scroll runway so the final project can reach
   the same left snap position as the first/middle cards.
   Mobile only; desktop marquee behavior remains unchanged.
   ========================================================= */
@media (max-width: 700px) {
  .project-marquee-group {
    padding-right: 24px;
  }
}

/* =========================================================
   V28 — MOBILE SELECTED PROJECTS: UNIFORM SNAP GEOMETRY
   Give the native horizontal scroller an explicit four-card
   track so every card uses the same left snap anchor.
   Mobile only; desktop marquee remains unchanged.
   ========================================================= */
@media (max-width: 700px) {
  .project-marquee {
    scroll-padding-inline: 24px;
  }

  .project-marquee-track {
    width: max-content;
    min-width: 0;
  }

  .project-marquee-group {
    flex: none;
    width: auto;
    padding-right: 24px;
  }

  .project-marquee-group > .project-tile {
    flex: 0 0 calc(100vw - 48px);
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px);
  }
}

/* V29 — System Reliability mobile boundary refinement
   Reduce only the excess whitespace after the closing statement. */
@media (max-width: 800px) {
  .reliability {
    padding-bottom: 48px;
  }
}

/* =========================================================
   V32 — TOOLS DESKTOP HEADING REGRESSION FIX
   V30 changed the Tools title from h1 to h2 for semantic heading order.
   Preserve the approved visual treatment explicitly on the new h2.
   ========================================================= */
.tools-section > #tools-title {
  margin: 0 auto 32px;
  padding: 0 24px;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 600;
  text-align: center;
}