/* Dark theme AA readability: #919191 body copy falls to 3.5:1 on the dark
   surfaces, so muted text steps up to the lighter soft tone. */
html[data-theme="dark"] { --cp-text-muted: var(--cp-text-soft); }

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cp-bg);
  color: var(--cp-text);
  font-family: "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
}
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 4px; }
::selection { background: var(--cp-highlight); color: var(--cp-text); }
.shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--cp-border);
  background: var(--cp-overlay);
  backdrop-filter: blur(14px);
}
.nav { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 700; text-decoration: none; }
.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cp-text);
  color: var(--cp-bg);
  font-size: .72rem;
}
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-actions a { color: var(--cp-text-muted); font-size: .86rem; font-weight: 650; text-decoration: none; }
.nav-actions a:hover { color: var(--cp-text); }
.hero { padding: 88px 0 76px; border-bottom: 1px solid var(--cp-border); background: var(--cp-accent-soft); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 5rem; align-items: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.2rem;
  color: var(--cp-text-muted);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow::before { width: 28px; height: 2px; background: var(--cp-accent); content: ""; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.035em; }
h1 { margin-bottom: 1.35rem; font-size: clamp(2.5rem, 5vw, 4.8rem); font-weight: 680; }
h2 { margin-bottom: 1rem; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 660; }
h3 { font-size: 1.15rem; }
.lead { max-width: 700px; color: var(--cp-text-muted); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .72rem 1rem;
  border: 1px solid var(--cp-border-strong);
  border-radius: .625rem;
  background: var(--cp-surface);
  color: var(--cp-text);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}
.button-primary { border-color: var(--cp-accent); background: var(--cp-accent); color: var(--cp-accent-fg); }
.hero-visual, .architecture {
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: var(--cp-surface);
  overflow: hidden;
}
.hero-visual { padding: 1rem; }
.hero-visual svg, .architecture svg { display: block; width: 100%; height: auto; }
.hero-visual .diagram-label { font-size: 8px; }
.hero-visual .diagram-text { font-size: 11px; }
.hero-visual .diagram-small { font-size: 8px; }
.diagram-node { fill: var(--cp-surface); stroke: var(--cp-border-strong); stroke-width: 1.2; }
.diagram-node-accent { fill: var(--cp-accent-soft); stroke: var(--cp-accent); stroke-width: 1.5; }
.diagram-line, .diagram-accent-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.diagram-line { stroke: var(--cp-border-strong); stroke-width: 1.5; }
.diagram-accent-line { stroke: var(--cp-accent); stroke-width: 2; }
.diagram-arrow { fill: var(--cp-accent); stroke: none; }
.diagram-arrow-muted { fill: var(--cp-border-strong); stroke: none; }
.diagram-arrow-success { fill: var(--cp-success); stroke: none; }
.diagram-arrow-warning { fill: var(--cp-warning); stroke: none; }
.diagram-warning-line { fill: none; stroke: var(--cp-warning); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram-node-success { fill: var(--cp-success); fill-opacity: .13; stroke: var(--cp-success); stroke-width: 1.5; }
.diagram-node-warning { fill: var(--cp-warning); fill-opacity: .15; stroke: var(--cp-warning); stroke-width: 1.5; }
.diagram-success-line { fill: none; stroke: var(--cp-success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram-flow {
  stroke-dasharray: 7 9;
  animation: diagram-flow 2.2s linear infinite;
}
.diagram-flow-slow {
  stroke-dasharray: 5 10;
  animation: diagram-flow 3.2s linear infinite;
}
.diagram-pulse { transform-box: fill-box; transform-origin: center; animation: diagram-pulse 2.8s ease-in-out infinite; }
.diagram-pulse-delay { animation-delay: -1.4s; }
.diagram-label {
  fill: var(--cp-accent);
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.diagram-text { fill: var(--cp-text); font-family: "Segoe UI", Aptos, Calibri, sans-serif; font-size: 12px; font-weight: 700; }
.diagram-small { fill: var(--cp-text-muted); font-family: "Segoe UI", Aptos, Calibri, sans-serif; font-size: 9px; }
@keyframes diagram-flow { to { stroke-dashoffset: -32; } }
@keyframes diagram-pulse { 0%, 100% { opacity: .76; } 50% { opacity: 1; } }
.metrics { padding: 0 0 72px; margin-top: -28px; position: relative; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--cp-border); border-radius: 16px; background: var(--cp-surface); overflow: hidden; }
.metric { min-height: 132px; padding: 1.4rem; border-right: 1px solid var(--cp-border); }
.metric::before { display: block; width: 30px; height: 3px; margin-bottom: 1rem; border-radius: 999px; background: var(--cp-accent); content: ""; }
.metric:nth-child(even)::before { background: var(--cp-success); }
.metric:nth-child(even) strong { color: var(--cp-success); }
.metric:last-child { border-right: 0; }
.metric strong { display: block; margin-bottom: .35rem; color: var(--cp-accent); font-size: 1.6rem; line-height: 1.1; }
.metric span { color: var(--cp-text-muted); font-size: .82rem; }
.section { padding: 88px 0; }
.section-soft { background: var(--cp-bg-elevated); border-block: 1px solid var(--cp-border); }
.section-accent { background: var(--cp-accent-soft); border-block: 1px solid var(--cp-border); }
html[data-theme="dark"] .hero,
html[data-theme="dark"] .section-accent { background: var(--cp-bg-elevated); }
.section-head { display: grid; grid-template-columns: .75fr 1.25fr; gap: 3rem; margin-bottom: 2.5rem; }
.section-head p { color: var(--cp-text-muted); }
.architecture { padding: clamp(1rem, 3vw, 2rem); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card {
  padding: 1.35rem;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: var(--cp-surface);
  transition: border-color 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1);
}
.card:hover { border-color: var(--cp-accent); transform: translateY(-3px); }
.card-index {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: .625rem;
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: .75rem;
  font-weight: 700;
}
.card p, .fit-card p { color: var(--cp-text-muted); font-size: .9rem; }
.stack-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.stack-item {
  min-height: 156px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1rem;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: var(--cp-surface);
}
.stack-item { transition: border-color 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1); }
.stack-item:hover { border-color: var(--cp-accent); transform: translateY(-3px); }
.stack-item:nth-child(even) .stack-icon { background: color-mix(in srgb, var(--cp-success) 16%, transparent); color: var(--cp-success); }
.stack-item:nth-child(even):hover { border-color: var(--cp-success); }
.stack-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  border-radius: .625rem;
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}
.stack-icon svg { width: 24px; height: 24px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.stack-icon svg .fill { fill: currentColor; stroke: none; }
.stack-item strong { display: block; margin-bottom: .2rem; font-size: .9rem; }
.stack-item span { color: var(--cp-text-muted); font-size: .7rem; line-height: 1.35; }
.fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fit-card {
  padding: 1.35rem;
  border: 1px solid var(--cp-border);
  border-top: 3px solid var(--cp-success);
  border-radius: 16px;
  background: var(--cp-surface);
  transition: border-color 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1);
}
.fit-card:hover { border-color: var(--cp-success); transform: translateY(-3px); }
.fit-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  border-radius: .625rem;
  background: color-mix(in srgb, var(--cp-success) 16%, transparent);
  color: var(--cp-success);
}
.fit-icon svg { width: 22px; height: 22px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.fit-card small { display: block; margin-bottom: .45rem; color: var(--cp-text-muted); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.fit-card h3 { margin: 0 0 .55rem; font-size: 1rem; line-height: 1.32; }
.fit-card p { margin: 0; color: var(--cp-text-muted); font-size: .88rem; }
.compare { margin-top: 2rem; border: 1px solid var(--cp-border); border-radius: 16px; background: var(--cp-surface); overflow: hidden; }
.compare-scroll { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.compare table { width: 100%; min-width: 700px; border-collapse: collapse; }
.compare th, .compare td { padding: 1rem 1.15rem; border-bottom: 1px solid var(--cp-border); font-size: .86rem; line-height: 1.5; text-align: left; vertical-align: top; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--cp-surface-soft); color: var(--cp-text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.compare tbody th { width: 20%; color: var(--cp-text); font-weight: 700; }
.compare td { color: var(--cp-text-muted); }
.compare .col-them { width: 38%; }
.compare .col-us { width: 42%; border-left: 1px solid var(--cp-border); background: var(--cp-surface-soft); color: var(--cp-text); }
.compare thead .col-us { color: var(--cp-accent); }
.evidence { margin-top: 1.25rem; padding: 1rem 1.15rem; border-left: 3px solid var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-text-muted); font-size: .82rem; }
.section-accent .evidence { background: var(--cp-surface); }
html[data-theme="dark"] .evidence { background: var(--cp-surface); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.related {
  display: block;
  min-height: 176px;
  padding: 1.35rem;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: var(--cp-surface);
  text-decoration: none;
}
.related:hover { border-color: var(--cp-accent); }
.related:hover h3 { color: var(--cp-accent); }
.related small { color: var(--cp-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.related p { color: var(--cp-text-muted); font-size: .86rem; }
.project-index { padding: 88px 0; }
.project-index .lead { margin-bottom: 3rem; }
.project-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
  border-top: 1px solid var(--cp-border);
  text-decoration: none;
}
.project-row:last-child { border-bottom: 1px solid var(--cp-border); }
.project-row:hover h2 { color: var(--cp-accent); }
.project-number { color: var(--cp-accent); font-family: Consolas, "Courier New", Courier, monospace; font-weight: 700; }
.project-row p { max-width: 640px; margin-bottom: 0; color: var(--cp-text-muted); }
.project-arrow { color: var(--cp-accent); font-size: 1.4rem; transition: transform 180ms cubic-bezier(.23,1,.32,1); }
.project-row:hover .project-arrow { transform: translateX(6px); }
.compliance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.compliance-badge { display: grid; grid-template-columns: 56px 1fr; gap: 1.1rem; align-items: start; padding: 1.35rem; border: 1px solid var(--cp-border); border-radius: 16px; background: var(--cp-surface); transition: border-color 180ms ease, transform 180ms cubic-bezier(.23,1,.32,1); }
.compliance-badge:hover { border-color: var(--cp-accent); transform: translateY(-3px); }
.compliance-emblem { display: grid; width: 56px; height: 56px; border-radius: 14px; background: var(--cp-accent-soft); color: var(--cp-accent); place-items: center; }
.compliance-emblem svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.compliance-badge:nth-child(3n+2) .compliance-emblem { background: color-mix(in srgb, var(--cp-success) 14%, transparent); color: var(--cp-success); }
.compliance-badge:nth-child(3n+2):hover { border-color: var(--cp-success); }
.compliance-badge small { display: block; margin-bottom: .3rem; color: var(--cp-text-soft); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.compliance-badge strong { display: block; margin-bottom: .45rem; font-size: 1rem; }
.compliance-badge p { margin-bottom: 0; color: var(--cp-text-muted); font-size: .84rem; }
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.industry-card { padding: 1.5rem; border: 1px solid var(--cp-border); border-radius: 16px; background: var(--cp-surface); transition: border-color 180ms ease, transform 180ms cubic-bezier(.23,1,.32,1); }
.industry-card:hover { border-color: var(--cp-accent); transform: translateY(-3px); }
.industry-card h3 { margin-bottom: .5rem; font-size: 1.02rem; }
.industry-card p { margin-bottom: 0; color: var(--cp-text-muted); font-size: .86rem; }
.industry-icon { display: grid; width: 40px; height: 40px; margin-bottom: .95rem; border-radius: 11px; background: var(--cp-accent-soft); color: var(--cp-accent); place-items: center; }
.industry-card:nth-child(even) .industry-icon { background: color-mix(in srgb, var(--cp-success) 14%, transparent); color: var(--cp-success); }
.industry-card:nth-child(even):hover { border-color: var(--cp-success); }
.industry-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.industry-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .95rem; }
.industry-tags span { padding: .22rem .6rem; border: 1px solid var(--cp-border); border-radius: 999px; color: var(--cp-text-muted); font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.shot-figure { margin: 0; overflow: hidden; border: 1px solid var(--cp-border); border-radius: 16px; background: var(--cp-surface); }
.shot-figure img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--cp-border); }
.shot-figure figcaption { padding: .9rem 1.2rem; color: var(--cp-text-muted); font-size: .8rem; }
.shot-figure figcaption strong { display: block; margin-bottom: .18rem; color: var(--cp-text); font-size: .88rem; }
.shot-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
img.shot-dark { display: none; }
html[data-theme="dark"] img.shot-light { display: none; }
html[data-theme="dark"] img.shot-dark { display: block; }
.cta { padding: 72px 0; background: var(--cp-accent); color: var(--cp-accent-fg); }
.cta-grid { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.cta p { margin-bottom: 0; color: var(--cp-accent-fg); opacity: .86; }
.cta .button { border-color: var(--cp-accent-fg); background: var(--cp-accent-fg); color: var(--cp-accent); }
.cta .button:hover { background: transparent; color: var(--cp-accent-fg); }
html[data-theme="dark"] .cta { background: var(--cp-surface); color: var(--cp-text); border-block: 1px solid var(--cp-border); }
html[data-theme="dark"] .cta p { color: var(--cp-text-muted); opacity: 1; }
html[data-theme="dark"] .cta .button { border-color: var(--cp-accent); background: var(--cp-accent); color: var(--cp-accent-fg); }
html[data-theme="dark"] .cta .button:hover { background: transparent; color: var(--cp-accent); }
footer { padding: 28px 0; border-top: 1px solid var(--cp-border); color: var(--cp-text-muted); font-size: .78rem; }
.footer-row { display: flex; justify-content: space-between; gap: 1rem; }
@media (max-width: 860px) {
  .hero-grid, .section-head { grid-template-columns: 1fr; gap: 2.5rem; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--cp-border); }
  .card-grid, .related-grid { grid-template-columns: 1fr 1fr; }
  .fit-grid { grid-template-columns: 1fr 1fr; }
  .compliance-grid, .industry-grid { grid-template-columns: 1fr 1fr; }
  .stack-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .shell { width: min(100% - 32px, 1160px); }
  .nav-actions a:not(.home-link) { display: none; }
  .hero, .section, .project-index { padding: 64px 0; }
  .metrics { margin-top: 0; padding-top: 1rem; }
  .metric-grid, .card-grid, .related-grid { grid-template-columns: 1fr; }
  .fit-grid { grid-template-columns: 1fr; }
  .compare-scroll { overflow: visible; }
  .compare table, .compare tbody, .compare tr, .compare tbody th, .compare td { display: block; width: auto; }
  .compare .col-them, .compare .col-us { width: auto; }
  .compare thead { display: none; }
  .compare table { min-width: 0; }
  .compare tbody tr { padding: .4rem 0 1rem; border-bottom: 1px solid var(--cp-border); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody th { padding: .9rem 1.15rem .3rem; border-bottom: 0; font-size: .95rem; }
  .compare td { padding: .35rem 1.15rem; border-bottom: 0; }
  .compare td::before {
    display: block;
    margin-bottom: .3rem;
    color: var(--cp-text-muted);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    content: attr(data-label);
  }
  .compare .col-us {
    margin: .6rem 1.15rem 0;
    padding: .85rem 1rem;
    border-left: 3px solid var(--cp-accent);
    border-radius: .625rem;
  }
  .compare .col-us::before { color: var(--cp-accent); }
  .compliance-grid, .industry-grid, .shot-grid { grid-template-columns: 1fr; }
  .stack-grid { grid-template-columns: 1fr 1fr; }
  .metric, .metric:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--cp-border); }
  .metric:last-child { border-bottom: 0; }
  .project-row { grid-template-columns: 42px 1fr; gap: 1rem; }
  .project-arrow { display: none; }
  .architecture { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .architecture::before {
    display: block;
    padding: 0 0 .65rem;
    color: var(--cp-text-muted);
    font-size: .72rem;
    font-weight: 700;
    content: "Swipe to explore architecture →";
  }
  .architecture svg { width: 760px; max-width: none; }
  .cta-grid, .footer-row { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .diagram-flow, .diagram-flow-slow, .diagram-pulse { animation: none; }
  .card, .stack-item, .project-arrow, .service-card { transition: none; }
  .card:hover, .stack-item:hover, .compliance-badge:hover, .industry-card:hover { transform: none; }
  .compliance-badge, .industry-card { transition: none; }
  .project-row:hover .project-arrow { transform: none; }
}