img[data-italia-generated="true"] {
  image-rendering: auto;
}

#site-hero video[data-hoplo-hero-video] {
  display: block;
  background: #557f91;
}

#site-hero::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(5, 28, 36, 0.74) 0%,
      rgba(7, 49, 58, 0.54) 34%,
      rgba(9, 72, 82, 0.18) 62%,
      rgba(12, 87, 122, 0) 82%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0) 48%);
}

#site-hero > div:first-of-type {
  z-index: 0;
}

#site-hero > div:nth-of-type(2) {
  position: relative;
  z-index: 4;
}

#site-hero > div:nth-of-type(3) {
  z-index: 5;
}

#site-hero .hero-gradient-text {
  color: rgba(251, 251, 248, 0.94) !important;
  background: none !important;
  -webkit-text-fill-color: rgba(251, 251, 248, 0.94) !important;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.24);
}

#site-hero p {
  color: rgba(251, 251, 248, 0.86) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

.italia-generated-visual {
  pointer-events: none;
  object-fit: cover;
  background: #fbfbf8;
  border: 1px solid rgba(38, 35, 35, 0.08);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 18px 45px rgba(38, 35, 35, 0.08),
    0 2px 8px rgba(38, 35, 35, 0.08);
}

.italia-orchestration {
  position: absolute;
  top: 360px;
  left: 50%;
  z-index: 35;
  width: min(760px, 72vw);
  aspect-ratio: 1586 / 992;
  transform: translateX(-50%);
}

.italia-build-visual {
  position: absolute;
  right: max(28px, calc((100vw - 1100px) / 2));
  z-index: 35;
  width: min(560px, 44vw);
  aspect-ratio: 1586 / 992;
}

.italia-build-roadmap {
  top: 350px;
}

.italia-build-engineering {
  top: 850px;
}

.italia-build-sales {
  top: 1370px;
}

.italia-build-finance {
  top: 1880px;
}

.italia-tools-panel {
  position: absolute;
  top: 430px;
  left: 50%;
  z-index: 35;
  width: min(760px, 74vw);
  aspect-ratio: 1448 / 1086;
  transform: translateX(-50%);
}

.italia-industry-support {
  position: absolute;
  right: max(28px, calc((100vw - 1100px) / 2));
  bottom: 112px;
  z-index: 30;
  width: min(360px, 28vw);
  aspect-ratio: 1586 / 992;
}

/* Show the original vector SVG mockups (nicer than the italia photos) in the
   build feature rows, the tools panel and the industries section — hide the
   italia photos that were covering them. Orchestration keeps its italia image. */
.italia-build-visual,
.italia-tools-panel,
.italia-industry-support {
  display: none !important;
}

/* Interactive tools section. The original captured mockup remains in the DOM
   as a no-JS fallback; this production layer turns the three value statements
   into real tabs and swaps the artifact below without changing the layout. */
.hoplo-tools-section h2 {
  position: relative;
  isolation: isolate;
}

.hoplo-tools-section h2::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -32px -52px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207, 237, 255, 0.22) 0%, rgba(139, 210, 255, 0.08) 42%, transparent 72%);
  filter: blur(16px);
  opacity: 0;
  transform: scale(0.72);
  pointer-events: none;
}

.hoplo-tools-highlight {
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.62) 12%, #fff 42%, #d9f1ff 51%, rgba(255, 255, 255, 0.68) 67%) !important;
  background-size: 240% 100% !important;
  background-position: 100% 50% !important;
}

.hoplo-tools-section.is-title-lit h2::after {
  animation: hoplo-tools-glow 1500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hoplo-tools-section.is-title-lit .hoplo-tools-highlight {
  animation: hoplo-tools-sheen 1700ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}

@keyframes hoplo-tools-glow {
  0% { opacity: 0; transform: scale(0.72); }
  42% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.3; transform: scale(1.08); }
}

@keyframes hoplo-tools-sheen {
  from { background-position: 115% 50%; }
  to { background-position: -15% 50%; }
}

.hoplo-tools-tabs .hoplo-tools-tab {
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.48) !important;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hoplo-tools-tabs .hoplo-tools-tab:hover {
  color: rgba(255, 255, 255, 0.82) !important;
  transform: translateY(-2px);
}

.hoplo-tools-tabs .hoplo-tools-tab[aria-pressed="true"] {
  color: #fff !important;
}

.hoplo-tools-tab .loader-bar-after {
  overflow: hidden;
}

.hoplo-tools-tab .loader-bar-after > span {
  display: block;
  width: 1px;
  height: 100% !important;
  background: #fff;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 200ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hoplo-tools-tab[aria-pressed="true"] .loader-bar-after > span {
  opacity: 1;
  transform: translateY(0);
}

.hoplo-tools-stage {
  position: relative;
}

.hoplo-tools-stage > :not(.hoplo-tools-artifacts) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hoplo-tools-artifacts {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 24px 36px;
}

.hoplo-tools-artifact {
  width: min(800px, 100%);
  height: 471px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 21px;
  background: rgba(223, 237, 246, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 24px 60px rgba(7, 54, 111, 0.2);
  transition: opacity 180ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease;
}

.hoplo-tools-artifact.is-switching {
  opacity: 0;
  transform: translateY(8px) scale(0.987);
  filter: blur(4px);
}

.hoplo-artifact-window {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 14px;
  background: rgba(247, 250, 250, 0.96);
  color: #262323;
  box-shadow:
    inset 0 2px 0 #fff,
    0 0 0 5px rgba(232, 231, 230, 0.28),
    0 8px 26px rgba(22, 64, 82, 0.12);
}

.hoplo-artifact-topbar {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(38, 35, 35, 0.08);
  background: rgba(255, 255, 255, 0.6);
}

.hoplo-artifact-product,
.hoplo-artifact-status,
.hoplo-artifact-kpis,
.hoplo-artifact-assignee,
.hoplo-artifact-actions,
.hoplo-integration-chip {
  display: flex;
  align-items: center;
}

.hoplo-artifact-product {
  gap: 11px;
  min-width: 0;
}

.hoplo-artifact-mark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #2ecaa5, #178b75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 5px 14px rgba(21, 129, 106, 0.2);
  color: #fff;
  font-family: var(--font-neoris), sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.hoplo-artifact-mark img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.hoplo-artifact-product strong,
.hoplo-artifact-review strong,
.hoplo-workflow-col strong,
.hoplo-custom-card strong {
  display: block;
  font-family: var(--font-neoris), sans-serif;
  font-size: 14px;
  font-weight: 540;
  line-height: 1.2;
}

.hoplo-artifact-product small,
.hoplo-artifact-review small,
.hoplo-workflow-col small,
.hoplo-custom-card small,
.hoplo-task-copy small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-neoris), sans-serif;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(38, 35, 35, 0.52);
}

.hoplo-artifact-status {
  gap: 7px;
  white-space: nowrap;
  font-family: var(--font-neoris), sans-serif;
  font-size: 11px;
  color: rgba(38, 35, 35, 0.64);
}

.hoplo-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #32bd8a;
  box-shadow: 0 0 0 4px rgba(50, 189, 138, 0.12);
}

.hoplo-artifact-body {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(0, 1.42fr) minmax(220px, 0.72fr);
  gap: 16px;
  padding: 18px;
}

.hoplo-artifact-main,
.hoplo-artifact-review,
.hoplo-workflow-col,
.hoplo-custom-card,
.hoplo-custom-canvas {
  border: 1px solid rgba(38, 35, 35, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 22px rgba(30, 62, 77, 0.05);
}

.hoplo-artifact-kpis {
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid rgba(38, 35, 35, 0.07);
}

.hoplo-kpi {
  flex: 1;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f3f6f6;
}

.hoplo-kpi strong {
  display: block;
  font-family: var(--font-neoris), sans-serif;
  font-size: 14px;
  font-weight: 540;
}

.hoplo-kpi span,
.hoplo-task-state,
.hoplo-workflow-task,
.hoplo-integration-chip,
.hoplo-custom-node {
  font-family: var(--font-neoris), sans-serif;
  font-size: 10px;
}

.hoplo-kpi span {
  color: rgba(38, 35, 35, 0.5);
}

.hoplo-task-list {
  padding: 2px 14px 8px;
}

.hoplo-task-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(38, 35, 35, 0.07);
}

.hoplo-task-row:last-child {
  border-bottom: 0;
}

.hoplo-task-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  background: #eaf3f4;
  color: #267b74;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
}

.hoplo-task-copy strong {
  display: block;
  overflow: hidden;
  font-family: var(--font-neoris), sans-serif;
  font-size: 11px;
  font-weight: 510;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hoplo-task-state {
  padding: 5px 7px;
  border-radius: 999px;
  background: #edf8f4;
  color: #267a62;
  white-space: nowrap;
}

.hoplo-task-state.is-review {
  background: #fff4da;
  color: #93651b;
}

.hoplo-artifact-review {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  background: linear-gradient(160deg, #fff, #f1f7f7);
}

.hoplo-review-summary {
  margin: 16px 0 0;
  padding: 12px;
  border-radius: 9px;
  background: rgba(39, 126, 115, 0.07);
  font-family: var(--font-neoris), sans-serif;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(38, 35, 35, 0.68);
}

.hoplo-artifact-assignee {
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-neoris), sans-serif;
  font-size: 10px;
  color: rgba(38, 35, 35, 0.56);
}

.hoplo-avatar {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #202020;
  color: #fff;
  font-size: 8px;
}

.hoplo-artifact-actions {
  gap: 7px;
  margin-top: 16px;
}

.hoplo-artifact-actions span {
  flex: 1;
  padding: 8px 9px;
  border: 1px solid rgba(38, 35, 35, 0.1);
  border-radius: 7px;
  background: #fff;
  text-align: center;
  font-family: var(--font-neoris), sans-serif;
  font-size: 10px;
  color: rgba(38, 35, 35, 0.66);
}

.hoplo-artifact-actions .is-primary {
  border-color: #202020;
  background: #202020;
  color: #fff;
}

.hoplo-workflows {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.hoplo-workflow-col {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 14px;
}

.hoplo-workflow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(38, 35, 35, 0.07);
}

.hoplo-workflow-count {
  display: grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 7px;
  background: #eef5f5;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: #28796f;
}

.hoplo-workflow-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}

.hoplo-workflow-task {
  position: relative;
  padding: 10px 10px 18px;
  border: 1px solid rgba(38, 35, 35, 0.07);
  border-radius: 8px;
  background: #f9fbfb;
  color: rgba(38, 35, 35, 0.74);
}

.hoplo-workflow-task::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 8px;
  left: 10px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(90deg, #35b99a var(--progress, 70%), #e3ebeb var(--progress, 70%));
}

.hoplo-workflow-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-neoris), sans-serif;
  font-size: 9px;
  color: rgba(38, 35, 35, 0.46);
}

.hoplo-customize {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
}

.hoplo-custom-card {
  padding: 16px;
}

.hoplo-integration-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.hoplo-integration-chip {
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(38, 35, 35, 0.07);
  border-radius: 8px;
  background: #f7f9f9;
  color: rgba(38, 35, 35, 0.7);
}

.hoplo-integration-chip::before {
  content: attr(data-letter);
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 5px;
  background: var(--chip-color, #e5eff0);
  color: #355b58;
  font-size: 8px;
  font-weight: 600;
}

.hoplo-custom-canvas {
  position: relative;
  overflow: hidden;
  background-color: #f7fafb;
  background-image: radial-gradient(rgba(38, 98, 111, 0.14) 0.7px, transparent 0.7px);
  background-size: 15px 15px;
}

.hoplo-custom-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, rgba(58, 176, 151, 0.18), rgba(58, 176, 151, 0.8), rgba(58, 176, 151, 0.18));
  transform-origin: left center;
}

.hoplo-custom-line.one { top: 34%; left: 21%; width: 34%; transform: rotate(12deg); }
.hoplo-custom-line.two { top: 57%; left: 23%; width: 33%; transform: rotate(-10deg); }
.hoplo-custom-line.three { top: 46%; left: 54%; width: 27%; transform: rotate(-20deg); }
.hoplo-custom-line.four { top: 55%; left: 54%; width: 28%; transform: rotate(20deg); }

.hoplo-custom-node {
  position: absolute;
  display: grid;
  min-width: 78px;
  min-height: 43px;
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(38, 35, 35, 0.1);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(29, 69, 79, 0.09);
  color: rgba(38, 35, 35, 0.72);
  text-align: center;
}

.hoplo-custom-node.is-agent {
  top: 39%;
  left: 43%;
  border-color: rgba(40, 157, 132, 0.36);
  background: #eaf8f4;
  color: #176c59;
}

.hoplo-custom-node.is-source { top: 20%; left: 8%; }
.hoplo-custom-node.is-rule { right: 8%; top: 16%; }
.hoplo-custom-node.is-output { right: 8%; bottom: 14%; }
.hoplo-custom-node.is-human { bottom: 13%; left: 10%; }

@media (max-width: 767px) {
  .hoplo-tools-tabs .hoplo-tools-tab {
    margin: 0 !important;
    padding: 10px !important;
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
  }

  .hoplo-tools-tabs .hoplo-tools-tab[aria-pressed="true"] {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
  }

  .hoplo-tools-artifacts {
    padding: 0 16px 20px;
  }

  .hoplo-tools-artifact {
    height: min(550px, calc(100% - 4px));
    padding: 8px;
    border-radius: 17px;
  }

  .hoplo-artifact-topbar {
    min-height: 58px;
    padding: 0 14px;
  }

  .hoplo-artifact-status {
    font-size: 9px;
  }

  .hoplo-artifact-body {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .hoplo-artifact-review {
    display: none;
  }

  .hoplo-workflows {
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: auto;
    padding: 10px;
  }

  .hoplo-workflow-col {
    min-height: 132px;
  }

  .hoplo-workflow-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hoplo-customize {
    grid-template-columns: 1fr;
    overflow: auto;
    padding: 10px;
  }

  .hoplo-custom-card {
    padding: 12px;
  }

  .hoplo-custom-canvas {
    min-height: 260px;
  }
}

/* Content operations artifact — replaces the final email-derived mockup while
   keeping its captured footprint, spacing density and quiet product surface. */
.hoplo-content-artifact {
  gap: 0 !important;
  padding: 18px 20px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(46, 202, 165, 0.08), transparent 34%),
    #fbfbf8 !important;
  color: #262323;
}

.hoplo-content-head,
.hoplo-content-product,
.hoplo-content-live,
.hoplo-content-row,
.hoplo-content-metrics,
.hoplo-content-guardrails,
.hoplo-content-guardrails span {
  display: flex;
  align-items: center;
}

.hoplo-content-head {
  min-height: 42px;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(38, 35, 35, 0.08);
}

.hoplo-content-product {
  min-width: 0;
  gap: 9px;
}

.hoplo-content-mark {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, #2ecaa5, #178b75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 5px 14px rgba(21, 129, 106, 0.16);
}

.hoplo-content-mark img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.hoplo-content-product strong,
.hoplo-content-pipeline header strong,
.hoplo-content-impact header strong {
  display: block;
  font-family: var(--font-neoris), sans-serif;
  font-size: 11px;
  font-weight: 570;
  line-height: 1.2;
}

.hoplo-content-product small,
.hoplo-content-pipeline header small,
.hoplo-content-impact header small,
.hoplo-content-copy small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-neoris), sans-serif;
  font-size: 8px;
  line-height: 1.25;
  color: rgba(38, 35, 35, 0.48);
}

.hoplo-content-live {
  flex: 0 0 auto;
  gap: 5px;
  font-family: var(--font-neoris), sans-serif;
  font-size: 8px;
  color: rgba(38, 35, 35, 0.54);
}

.hoplo-content-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #20b18d;
  box-shadow: 0 0 0 3px rgba(32, 177, 141, 0.1);
}

.hoplo-content-layout {
  display: grid;
  min-height: 202px;
  grid-template-columns: minmax(0, 1.45fr) minmax(120px, 0.8fr);
  gap: 11px;
  padding: 13px 0 11px;
}

.hoplo-content-pipeline,
.hoplo-content-impact {
  min-width: 0;
  border: 1px solid rgba(38, 35, 35, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.7);
}

.hoplo-content-pipeline {
  padding: 10px;
}

.hoplo-content-pipeline header,
.hoplo-content-impact header {
  padding-bottom: 8px;
}

.hoplo-content-row {
  min-height: 43px;
  gap: 8px;
  border-top: 1px solid rgba(38, 35, 35, 0.06);
}

.hoplo-content-code {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 6px;
  background: #e6f3ff;
  color: #2e6d93;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 7px;
  font-weight: 600;
}

.hoplo-content-code.is-1 {
  background: #e9f5df;
  color: #4c7d33;
}

.hoplo-content-code.is-2 {
  background: #f3e9ff;
  color: #765598;
}

.hoplo-content-copy {
  min-width: 0;
  flex: 1;
}

.hoplo-content-copy strong {
  display: block;
  overflow: hidden;
  font-family: var(--font-neoris), sans-serif;
  font-size: 9px;
  font-weight: 540;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hoplo-content-state {
  flex: 0 0 auto;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(46, 202, 165, 0.09);
  color: #187d68;
  font-family: var(--font-neoris), sans-serif;
  font-size: 7px;
}

.hoplo-content-impact {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 10px;
}

.hoplo-content-bars {
  display: flex;
  height: 74px;
  align-items: end;
  gap: 5px;
  padding: 7px 5px 0;
  border-bottom: 1px solid rgba(38, 35, 35, 0.07);
  background: linear-gradient(rgba(38, 35, 35, 0.035) 1px, transparent 1px);
  background-size: 100% 18px;
}

.hoplo-content-bars i {
  width: 100%;
  height: var(--bar);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #43c9aa, #72aedd);
  opacity: 0.82;
}

.hoplo-content-metrics {
  flex: 1;
  justify-content: space-between;
  gap: 4px;
  padding-top: 10px;
}

.hoplo-content-metrics span {
  min-width: 0;
}

.hoplo-content-metrics small,
.hoplo-content-metrics strong {
  display: block;
  font-family: var(--font-neoris), sans-serif;
}

.hoplo-content-metrics small {
  font-size: 6px;
  color: rgba(38, 35, 35, 0.44);
}

.hoplo-content-metrics strong {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 580;
}

.hoplo-content-guardrails {
  min-height: 34px;
  justify-content: center;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid rgba(38, 35, 35, 0.08);
}

.hoplo-content-guardrails span {
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid rgba(38, 35, 35, 0.07);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.66);
  font-family: var(--font-neoris), sans-serif;
  font-size: 7px;
  color: rgba(38, 35, 35, 0.66);
}

.hoplo-content-guardrails i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2ecaa5;
}

@media (max-width: 767px) {
  .hoplo-content-artifact {
    padding: 16px !important;
  }

  .hoplo-content-layout {
    grid-template-columns: 1fr;
  }

  .hoplo-content-impact {
    display: none;
  }

  .hoplo-content-live {
    font-size: 7px;
  }

  .hoplo-content-guardrails {
    flex-wrap: wrap;
  }
}

/* --- Proportion pass: the word-search grid and footer read oversized
   relative to the rest of the site. Scale them down to feel coherent. --- */

.hoplo-industries-section {
  padding-top: 84px !important;
  padding-bottom: 84px !important;
}

/* Shrink the whole word-search block (grid was 720x800 with 80px cells).
   Scaling the wrapper keeps the highlight overlays aligned with the letters. */
@media (min-width: 1000px) {
  .hoplo-wordsearch {
    transform: scale(0.66);
    transform-origin: top center;
    margin-bottom: -272px;
  }
}

/* Footer: heading was 76.8px and the top padding 128px — both too large. */
footer[aria-label="Hoplo footer"] .hoplo-footer-shell {
  padding-top: 84px !important;
}
footer[aria-label="Hoplo footer"] h2 {
  font-size: clamp(30px, 4vw, 46px) !important;
  line-height: 1.08 !important;
}

/* Client logos — clean responsive grid (cofounder style): no tile background,
   visible and wrapping on mobile, replaces the old marquee. */
.hoplo-client-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px 44px;
  align-items: center;
  justify-items: center;
  width: min(1040px, calc(100vw - 48px));
  margin: 0 auto;
}
.hoplo-client-grid .hoplo-client-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px;
}
.hoplo-client-grid .hoplo-client-logo {
  width: auto !important;
  height: auto !important;
  max-height: 38px !important;
  max-width: 116px !important;
  object-fit: contain;
  opacity: 0.82;
  filter: saturate(0.9) contrast(0.95);
  mix-blend-mode: multiply;
  transition:
    opacity 0.2s ease,
    filter 0.2s ease;
}
.hoplo-client-grid .hoplo-client-link:hover .hoplo-client-logo {
  opacity: 1;
  filter: saturate(1) contrast(1);
}
@media (max-width: 900px) {
  .hoplo-client-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 28px;
  }
}
@media (max-width: 560px) {
  .hoplo-client-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 16px;
    width: calc(100vw - 40px);
  }
  .hoplo-client-grid .hoplo-client-logo {
    max-height: 30px !important;
    max-width: 88px !important;
  }
}

/* Client marquee (restored disposition) — transparent logos, NO tile
   background and NO blend, so nothing sits in a grey box. */
.hoplo-client-ticker .hoplo-client-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 26px;
}
.hoplo-client-ticker .hoplo-client-logo {
  width: auto !important;
  height: 34px !important; /* explicit height normalizes every logo to one optical size */
  max-height: 34px !important;
  max-width: 154px !important;
  object-fit: contain;
  opacity: 0.88;
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: none;
  transition: opacity 0.2s ease;
}
.hoplo-client-ticker .hoplo-client-link:hover .hoplo-client-logo {
  opacity: 1;
}

/* Language switcher (IT / EN) in the header */
.hoplo-lang-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-right: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.hoplo-lang-switch a {
  color: rgba(251, 251, 248, 0.6);
  text-decoration: none;
  padding: 2px 3px;
  transition: color 0.2s ease;
}
.hoplo-lang-switch a:hover {
  color: rgba(251, 251, 248, 0.92);
}
.hoplo-lang-switch a.is-active {
  color: #fbfbf8;
  font-weight: 600;
}
.hoplo-lang-switch span {
  color: rgba(251, 251, 248, 0.3);
}
.hoplo-lang-switch--footer {
  margin: 0;
  font-family: var(--font-ibm-plex-mono, var(--font-mono, monospace));
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

header a[aria-label="Home"] img[alt="Hoplo"] {
  height: 32px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain;
}

@media (min-width: 1000px) {
  header a[aria-label="Home"] img[alt="Hoplo"] {
    height: 44px !important;
  }
}

.site-header {
  transition:
    background-color 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.site-header.is-scrolled {
  background: rgba(21, 22, 20, 0.82) !important;
  border-color: rgba(251, 251, 248, 0.12) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(18px);
}

/* Subpages have a LIGHT hero (unlike the dark homepage hero), so the header's
   default white text would be invisible. Force the solid dark header bar from
   first paint on every subpage (same look as the homepage's scrolled state). */
.hoplo-subpage .site-header,
.hoplo-subpage header.site-header {
  background: rgba(21, 22, 20, 0.86) !important;
  border-color: rgba(251, 251, 248, 0.12) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(18px);
}

/* Hero pages (About) have a full-bleed image hero: keep the header transparent
   over the image with only a soft top gradient (so the image reaches the very
   top — no hard "cut" line). The solid dark bar returns on scroll (.is-scrolled). */
.hoplo-hero-page .site-header:not(.is-scrolled),
.hoplo-hero-page header.site-header:not(.is-scrolled) {
  /* Fully transparent — the readability scrim lives in the hero itself
     (.spa-hero-scrim), a single continuous gradient with no box edge, so
     there is no hard line at the header's bottom. */
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.site-header a,
.site-header button {
  transition:
    color 0.22s ease,
    opacity 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header a:hover,
.site-header button:hover {
  transform: translateY(-1px);
}

header button[aria-label="Open menu"] {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

header button[aria-label="Open menu"].is-open {
  transform: rotate(90deg) scale(1.04);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}

.hoplo-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: none;
  background: rgba(5, 8, 10, 0.48);
  opacity: 0;
  backdrop-filter: blur(0);
  transition:
    opacity 0.34s ease,
    backdrop-filter 0.34s ease;
}

.hoplo-menu-backdrop.is-open {
  opacity: 1;
  backdrop-filter: blur(12px);
}

.hoplo-menu-panel {
  position: fixed;
  inset: 10px;
  z-index: 300;
  display: none;
  overflow: hidden;
  padding: 22px;
  color: #fbfbf8;
  background:
    linear-gradient(135deg, rgba(251, 251, 248, 0.08), rgba(13, 111, 128, 0.14)),
    rgba(23, 23, 22, 0.96);
  border: 1px solid rgba(251, 251, 248, 0.14);
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translate3d(0, -16px, 0) scale(0.97);
  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.hoplo-menu-panel.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.hoplo-menu-panel::before {
  content: "";
  position: absolute;
  inset: auto -20% -28% 16%;
  height: 280px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(214, 43, 43, 0.2), transparent 68%);
}

.hoplo-menu-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.hoplo-menu-logo {
  width: 106px;
  height: auto;
}

.hoplo-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fbfbf8;
  cursor: pointer;
  background: rgba(251, 251, 248, 0.09);
  border: 1px solid rgba(251, 251, 248, 0.18);
  border-radius: 999px;
  transition:
    transform 0.22s ease,
    background-color 0.22s ease;
}

.hoplo-menu-close:hover {
  transform: rotate(90deg);
  background: rgba(251, 251, 248, 0.16);
}

.hoplo-menu-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: clamp(56px, 12vh, 110px);
}

.hoplo-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  color: #fbfbf8;
  font-size: clamp(28px, 9vw, 54px);
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.2s ease;
}

.hoplo-menu-panel.is-open .hoplo-menu-link {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hoplo-menu-link::after {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  opacity: 0.42;
  transform: rotate(45deg);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.hoplo-menu-link:hover {
  color: #f2d68b;
}

.hoplo-menu-link:hover::after {
  opacity: 0.85;
  transform: translateX(4px) rotate(45deg);
}

.hoplo-reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.985);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.hoplo-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.hoplo-reveal[data-hoplo-delay="1"] {
  transition-delay: 0.08s;
}

.hoplo-reveal[data-hoplo-delay="2"] {
  transition-delay: 0.16s;
}

.hoplo-reveal[data-hoplo-delay="3"] {
  transition-delay: 0.24s;
}

.hoplo-client-stage {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.hoplo-client-clean-grid,
.hoplo-client-box-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  justify-items: stretch;
  width: min(500px, calc(100vw - 44px));
  margin: 0 auto;
}

.hoplo-client-stage-compact {
  overflow: visible;
}

.hoplo-client-stage-compact .hoplo-client-link {
  width: 100%;
  padding: 0;
}

.hoplo-client-stage-compact .hoplo-client-tile {
  width: 100%;
  min-width: 0;
  height: 76px;
  padding: 16px 20px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(38, 35, 35, 0.08) !important;
  border-radius: 9px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 12px 28px rgba(38, 35, 35, 0.055) !important;
  backdrop-filter: blur(10px);
}

.hoplo-client-stage-compact .hoplo-client-link:hover .hoplo-client-tile {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 16px 34px rgba(38, 35, 35, 0.09) !important;
}

.hoplo-client-stage-compact .hoplo-client-logo {
  opacity: 0.82;
  filter: saturate(0.92) contrast(0.96);
  mix-blend-mode: normal;
}

.hoplo-client-stage-compact .hoplo-client-link:hover .hoplo-client-logo {
  opacity: 1;
  filter: saturate(1) contrast(1);
}

@media (min-width: 1000px) {
  .hoplo-client-clean-grid,
  .hoplo-client-box-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: min(820px, calc(100vw - 80px));
  }

  .hoplo-client-stage-compact .hoplo-client-link:nth-child(1) .hoplo-client-tile,
  .hoplo-client-stage-compact .hoplo-client-link:nth-child(4) .hoplo-client-tile {
    height: 86px;
  }

  .hoplo-client-stage-compact .hoplo-client-link:nth-child(2) .hoplo-client-tile,
  .hoplo-client-stage-compact .hoplo-client-link:nth-child(3) .hoplo-client-tile {
    height: 72px;
    margin-top: 7px;
  }
}

.hoplo-client-ticker {
  width: min(1120px, calc(100vw - 40px));
  padding: 4px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hoplo-client-track {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  animation: hoplo-client-marquee 34s linear infinite;
}

.hoplo-client-ticker:hover .hoplo-client-track {
  animation-play-state: paused;
}

.hoplo-client-link {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: inherit;
  text-decoration: none;
}

.hoplo-client-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 84px;
  padding: 18px 22px !important;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    box-shadow 0.28s ease;
}

.hoplo-client-link:hover .hoplo-client-tile {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08);
}

.hoplo-client-logo {
  display: block;
  width: auto;
  max-width: 128px;
  max-height: 44px;
  height: auto;
  object-fit: contain;
  opacity: 0.8;
  filter: saturate(0.92) contrast(0.94);
}

.hoplo-client-link:hover .hoplo-client-logo {
  opacity: 0.98;
  filter: saturate(1) contrast(1);
}

.hoplo-client-logo-tim {
  max-width: 116px;
}

.hoplo-client-logo-eni {
  max-width: 98px;
  max-height: 52px;
}

.hoplo-client-logo-euronext,
.hoplo-client-logo-lseg,
.hoplo-client-logo-gigroup,
.hoplo-client-logo-kena,
.hoplo-client-logo-aruba,
.hoplo-client-logo-escp,
.hoplo-client-logo-vittoria,
.hoplo-client-logo-italiaonline {
  width: 132px;
  height: 50px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.hoplo-client-logo-plenitude {
  width: 132px;
  height: 50px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.hoplo-client-mobile-grid {
  display: none;
}

@keyframes hoplo-client-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

footer[aria-label="Hoplo footer"] {
  position: relative;
  overflow: hidden;
  background: #161917;
}

footer[aria-label="Hoplo footer"] > picture img {
  filter: saturate(0.92) contrast(0.9) brightness(0.76);
}

.hoplo-footer-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(19, 22, 21, 0.94) 0%, rgba(24, 42, 36, 0.88) 42%, rgba(46, 82, 38, 0.82) 100%),
    radial-gradient(circle at 76% 34%, rgba(13, 111, 128, 0.18), transparent 34%);
}

.hoplo-footer-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(96px, 10vw, 150px) 0 34px;
  color: #fbfbf8;
}

.hoplo-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.9fr) minmax(240px, 0.42fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: end;
}

.hoplo-footer-brand {
  max-width: 620px;
}

.hoplo-footer-logo-link {
  display: inline-flex;
  margin-bottom: 30px;
}

.hoplo-footer-logo {
  display: block;
  width: 154px;
  height: auto;
}

.hoplo-footer-brand h2 {
  max-width: 640px;
  margin: 0;
  font-size: clamp(44px, 6vw, 82px);
  line-height: 0.92;
  letter-spacing: 0;
}

.hoplo-footer-brand p {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(251, 251, 248, 0.82);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
}

.hoplo-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hoplo-footer-primary,
.hoplo-footer-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  font-size: 15px;
  color: #171717;
  text-decoration: none;
  background: #fbfbf8;
  border: 1px solid rgba(251, 251, 248, 0.22);
  border-radius: 999px;
  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    color 0.22s ease;
}

.hoplo-footer-secondary {
  color: #fbfbf8;
  background: rgba(251, 251, 248, 0.08);
}

.hoplo-footer-primary:hover,
.hoplo-footer-secondary:hover {
  transform: translateY(-2px);
}

.hoplo-footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-bottom: 10px;
}

.hoplo-footer-column-title {
  margin: 0 0 14px;
  color: rgba(251, 251, 248, 0.92);
  font-size: 13px;
  line-height: 1;
}

.hoplo-footer-link-list {
  display: grid;
  gap: 11px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hoplo-footer-link {
  color: rgba(251, 251, 248, 0.72);
  font-size: 14px;
  line-height: 1.25;
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.hoplo-footer-link:hover {
  color: #fbfbf8;
  transform: translateX(2px);
}

.hoplo-footer-card {
  display: grid;
  gap: 14px;
  padding: 12px;
  color: #fbfbf8;
  text-decoration: none;
  background: rgba(251, 251, 248, 0.08);
  border: 1px solid rgba(251, 251, 248, 0.13);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s ease,
    background-color 0.28s ease;
}

.hoplo-footer-card:hover {
  transform: translateY(-4px);
  background: rgba(251, 251, 248, 0.11);
  border-color: rgba(251, 251, 248, 0.24);
}

.hoplo-footer-card img {
  width: 100%;
  aspect-ratio: 1.35;
  object-fit: cover;
  border-radius: 8px;
}

.hoplo-footer-card span {
  display: block;
  color: rgba(251, 251, 248, 0.8);
  font-size: 13px;
  line-height: 1.45;
}

/* Bottom bar sits on the green end of the footer gradient (~rgb(40,68,35)),
   not on the near-black footer base, so text opacity is set against that:
   0.78 → 7.07:1 and 0.68 → 5.8:1. The previous 0.56 / 0.44 measured
   4.49:1 and 3.39:1, both below the 4.5:1 minimum. */
.hoplo-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  margin-top: clamp(52px, 7vw, 84px);
  padding-top: 22px;
  color: rgba(251, 251, 248, 0.78);
  font-size: 13px;
  border-top: 1px solid rgba(251, 251, 248, 0.14);
}
/* Pushed right on its own, so the two spans before it stay left-aligned
   instead of drifting with their own length as space-between made them. */
.hoplo-footer-bottom > .hoplo-lang-switch--footer {
  margin-left: auto;
}
.hoplo-footer-legal {
  flex-basis: 100%;
  color: rgba(251, 251, 248, 0.68);
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  max-width: 96ch;
}
.hoplo-footer-legal a {
  color: inherit;
  text-decoration-color: rgba(251, 251, 248, 0.35);
  text-underline-offset: 2px;
}
.hoplo-footer-legal a:hover {
  color: #fbfbf8;
  text-decoration-color: currentColor;
}

.hoplo-industries-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hoplo-industries-shell {
  position: relative;
  z-index: 36;
}

.hoplo-wordsearch-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: clamp(48px, 7vw, 68px);
}

.hoplo-wordsearch {
  --cols: 9;
  --rows: 10;
  position: relative;
  width: min(720px, calc(100vw - 48px));
  aspect-ratio: var(--cols) / var(--rows);
  user-select: none;
}

.hoplo-wordsearch-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
}

.hoplo-wordsearch-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(38, 35, 35, 0.34);
  font-family: var(--font-departure), "Courier New", monospace;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
}

.hoplo-wordsearch-cell.is-selected {
  color: rgba(38, 35, 35, 0.9);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 10px rgba(134, 206, 255, 0.22);
}

.hoplo-wordsearch-highlight {
  position: absolute;
  z-index: 1;
  left: calc((100% / var(--cols)) * var(--x) + 4px);
  top: calc((100% / var(--rows)) * var(--y) + 4px);
  width: calc((100% / var(--cols)) * var(--w) - 8px);
  height: calc((100% / var(--rows)) * var(--h) - 8px);
  border: 2px solid rgba(104, 190, 238, 0.82);
  border-radius: 999px;
  background: rgba(151, 216, 255, 0.13);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 12px 26px rgba(104, 190, 238, 0.14);
  opacity: 0;
  transform: scale(0.96);
  animation: hoplo-wordsearch-select 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--delay);
  pointer-events: none;
}

.hoplo-wordsearch-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: clamp(38px, 6vw, 58px);
  padding: 0 26px;
  color: rgba(38, 35, 35, 0.86);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 0;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(38, 35, 35, 0.06);
  border-radius: 999px;
  box-shadow:
    0 18px 42px rgba(38, 35, 35, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    color 0.24s ease;
}

.hoplo-wordsearch-chip:hover {
  color: rgba(38, 35, 35, 1);
  transform: translateY(-2px);
  box-shadow:
    0 22px 50px rgba(38, 35, 35, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

@keyframes hoplo-wordsearch-select {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 999px) {
  .italia-orchestration {
    top: 390px;
    width: min(680px, 84vw);
  }

  .italia-build-visual {
    display: none;
  }

  .italia-industry-support {
    display: none;
  }

  .italia-tools-panel {
    top: 470px;
    width: min(620px, 84vw);
  }

  .site-header.is-scrolled {
    background: rgba(21, 22, 20, 0.9) !important;
  }

  /* The homepage social-proof band only holds the marquee ticker (no mobile
     grid like the subpages), so hiding it left an empty padded gap. Instead,
     turn the ticker into a centered wrapping row of logos and drop the
     duplicate marquee set so nothing shows twice. */
  .hoplo-client-ticker {
    width: min(680px, calc(100vw - 28px));
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hoplo-client-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 20px;
  }
  .hoplo-client-ticker .hoplo-client-link {
    padding: 6px 4px;
  }
  .hoplo-client-track > .hoplo-client-link:nth-child(n + 13) {
    display: none;
  }

  .hoplo-client-clean-grid,
  .hoplo-client-box-grid {
    display: grid;
  }

  .hoplo-client-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: min(680px, calc(100vw - 28px));
  }

  .hoplo-client-link {
    padding: 4px;
  }

  .hoplo-client-tile {
    width: 100%;
    min-width: 0;
    height: 76px;
    padding: 14px 16px !important;
  }

  .hoplo-client-logo,
  .hoplo-client-logo-euronext,
  .hoplo-client-logo-lseg,
  .hoplo-client-logo-plenitude,
  .hoplo-client-logo-gigroup,
  .hoplo-client-logo-kena,
  .hoplo-client-logo-aruba,
  .hoplo-client-logo-escp,
  .hoplo-client-logo-vittoria,
  .hoplo-client-logo-italiaonline {
    width: min(118px, 32vw);
    height: 46px;
    max-width: none;
    max-height: none;
  }

  .hoplo-footer-shell {
    width: min(680px, calc(100% - 28px));
    padding: 82px 0 28px;
  }

  .hoplo-footer-main {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hoplo-footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 10px 0 0;
  }

  .hoplo-footer-card {
    max-width: 360px;
  }

  .hoplo-wordsearch {
    width: min(410px, calc(100vw - 40px));
  }

  .hoplo-wordsearch-cell {
    font-size: clamp(24px, 7.8vw, 36px);
  }
}

@media (max-width: 520px) {
  .italia-orchestration {
    top: 310px;
    width: 86vw;
  }

  .italia-tools-panel {
    top: 500px;
    width: 86vw;
  }

  .hoplo-menu-panel {
    inset: 8px;
    padding: 18px;
    border-radius: 14px;
  }

  .hoplo-menu-list {
    margin-top: 58px;
  }

  .hoplo-client-mobile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hoplo-client-clean-grid,
  .hoplo-client-box-grid {
    width: min(340px, calc(100vw - 44px));
    gap: 12px;
  }

  .hoplo-client-stage-compact .hoplo-client-link {
    padding: 0;
  }

  .hoplo-client-stage-compact .hoplo-client-tile {
    width: 100%;
    height: 68px;
    padding: 13px 14px !important;
  }

  .hoplo-client-stage-compact .hoplo-client-logo-tim {
    max-width: 116px;
  }

  .hoplo-client-stage-compact .hoplo-client-logo-eni {
    max-width: 92px;
  }

  .hoplo-client-stage-compact .hoplo-client-logo-euronext,
  .hoplo-client-stage-compact .hoplo-client-logo-lseg {
    width: 132px;
    height: 46px;
  }

  .hoplo-client-tile {
    height: 68px;
    padding: 12px !important;
  }

  .hoplo-footer-brand h2 {
    font-size: clamp(40px, 12vw, 58px);
  }

  .hoplo-footer-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hoplo-footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;
  }

  .hoplo-footer-card {
    max-width: none;
  }

  .hoplo-wordsearch-wrap {
    margin-top: 56px;
  }

  .hoplo-wordsearch {
    width: min(344px, calc(100vw - 42px));
  }

  .hoplo-wordsearch-cell {
    font-size: clamp(24px, 7.7vw, 30px);
  }

  .hoplo-wordsearch-highlight {
    left: calc((100% / var(--cols)) * var(--x) + 3px);
    top: calc((100% / var(--rows)) * var(--y) + 3px);
    width: calc((100% / var(--cols)) * var(--w) - 6px);
    height: calc((100% / var(--rows)) * var(--h) - 6px);
    border-width: 2px;
  }

  .hoplo-wordsearch-chip {
    min-height: 42px;
    margin-top: 42px;
    padding: 0 24px;
  }

  .italia-build-engineering {
    display: block;
    position: absolute;
    top: 1450px;
    left: 32px;
    z-index: 42;
    width: calc(100vw - 64px);
    max-width: 326px;
    height: 210px;
    object-fit: cover;
    object-position: center top;
    border-radius: 10px;
    box-shadow:
      0 14px 36px rgba(38, 35, 35, 0.12),
      0 1px 0 rgba(255, 255, 255, 0.7) inset;
  }

  .italia-build-engineering.hoplo-reveal,
  .italia-build-engineering.hoplo-reveal.is-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hoplo-client-track,
  .hoplo-reveal,
  .hoplo-menu-panel,
  .hoplo-menu-backdrop,
  .site-header,
  .site-header a,
  .site-header button,
  .hoplo-footer-card,
  .hoplo-client-tile {
    animation: none !important;
    transition: none !important;
  }

  .hoplo-wordsearch-highlight {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .hoplo-reveal {
    opacity: 1;
    transform: none;
  }

  .hoplo-reveal-soft {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  #site-hero.js-hero .hero-anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .hoplo-parallax {
    transform: none !important;
  }
}

/* ============================================================
   Hoplo — hero flash fix + rich motion layer (framer-motion feel)
   Appended pass: eliminate hero flash, restore overlay centering
   under reveal, and add staggered blur-in reveals + hero entrance.
   ============================================================ */

/* Landscape-toned backdrop so the italia hero never flashes blank/
   cream while decoding (image is preloaded + decoded async). */
#site-hero {
  background: linear-gradient(157deg, #7ea6c4 0%, #6f92a4 34%, #9fae8c 66%, #c3b291 100%);
}

/* Borsa Italiana mark — match the other enterprise logos' sizing. */
.hoplo-client-logo-borsa {
  width: 132px;
  height: 50px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Soft reveal for transform-positioned italia visuals.
   The orchestration/tools overlays center via transform: translateX(-50%),
   so a transform-based reveal (.hoplo-reveal) clobbers their centering and
   makes them drift sideways over the underlying mockup. Fade + de-blur only,
   never touching transform, keeps them perfectly centered. */
.hoplo-reveal-soft {
  opacity: 0;
  filter: blur(12px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter;
}
.hoplo-reveal-soft.is-visible {
  opacity: 1;
  filter: blur(0);
}
.hoplo-reveal-soft[data-hoplo-delay="1"] { transition-delay: 0.08s; }
.hoplo-reveal-soft[data-hoplo-delay="2"] { transition-delay: 0.16s; }
.hoplo-reveal-soft[data-hoplo-delay="3"] { transition-delay: 0.24s; }

/* Richer scroll reveal: fold a blur-in into the existing rise + fade,
   and extend the stagger buckets for a longer cascade per section. */
.hoplo-reveal {
  filter: blur(8px);
  transition:
    opacity 0.74s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.74s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.74s cubic-bezier(0.22, 1, 0.36, 1);
}
.hoplo-reveal.is-visible {
  filter: blur(0);
}
.hoplo-reveal[data-hoplo-delay="4"] { transition-delay: 0.32s; }
.hoplo-reveal[data-hoplo-delay="5"] { transition-delay: 0.40s; }
.hoplo-reveal[data-hoplo-delay="6"] { transition-delay: 0.48s; }
.hoplo-reveal[data-hoplo-delay="7"] { transition-delay: 0.56s; }

/* Hero entrance — staggered rise + de-blur on load. Uses a keyframe with
   `both` fill so the hidden state only exists once JS adds `.js-hero`
   (no JS => text stays visible; no flash-of-final-state when JS is present). */
@keyframes hoplo-hero-rise {
  from { opacity: 0; transform: translateY(26px); filter: blur(7px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}
#site-hero.js-hero .hero-anim {
  animation: hoplo-hero-rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#site-hero.js-hero .hero-anim[data-d="0"] { animation-delay: 0.06s; }
#site-hero.js-hero .hero-anim[data-d="1"] { animation-delay: 0.18s; }
#site-hero.js-hero .hero-anim[data-d="2"] { animation-delay: 0.30s; }
#site-hero.js-hero .hero-anim[data-d="3"] { animation-delay: 0.42s; }

/* Perf hint for the JS-driven hero-text parallax. */
.hoplo-parallax { will-change: transform; }

/* Client ticker legibility — the .jpg marks read faint under the heavy
   desaturation; lift base opacity a touch and give a bit more presence. */
.hoplo-client-ticker .hoplo-client-logo {
  opacity: 0.92;
  filter: saturate(0.96) contrast(0.98);
}
.hoplo-client-ticker .hoplo-client-link:hover .hoplo-client-logo {
  opacity: 1;
  filter: saturate(1) contrast(1);
}
.hoplo-client-ticker .hoplo-client-tile {
  width: 184px;
  height: 88px;
}

/* Customer logo cloud — adapted from the supplied grid component to Hoplo's
   light surface, local logo library and quieter enterprise visual language. */
#social-proof {
  overflow-x: clip;
}

.hoplo-client-stage--cloud {
  width: min(1040px, calc(100vw - 48px));
}

.hoplo-logo-cloud {
  position: relative;
  width: 100%;
  border-right: 1px solid rgba(38, 35, 35, 0.1);
  border-left: 1px solid rgba(38, 35, 35, 0.1);
}

.hoplo-logo-cloud::before,
.hoplo-logo-cloud::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  width: 100vw;
  border-top: 1px solid rgba(38, 35, 35, 0.1);
  transform: translateX(-50%);
  pointer-events: none;
}

.hoplo-logo-cloud::before {
  top: 0;
}

.hoplo-logo-cloud::after {
  bottom: 0;
}

.hoplo-logo-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
}

.hoplo-logo-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 104px;
  align-items: center;
  justify-content: center;
  padding: 24px 28px;
  border-right: 1px solid rgba(38, 35, 35, 0.1);
  border-bottom: 1px solid rgba(38, 35, 35, 0.1);
  background: rgba(251, 251, 248, 0.76);
  color: inherit;
  text-decoration: none;
  transition:
    background-color 220ms ease,
    box-shadow 260ms ease;
}

.hoplo-logo-card:nth-child(5n) {
  border-right: 0;
}

.hoplo-logo-card:nth-last-child(-n + 5) {
  border-bottom: 0;
}

.hoplo-logo-card:nth-child(1),
.hoplo-logo-card:nth-child(3),
.hoplo-logo-card:nth-child(5),
.hoplo-logo-card:nth-child(7),
.hoplo-logo-card:nth-child(9) {
  background: rgba(231, 231, 227, 0.46);
}

.hoplo-logo-card::after {
  content: "+";
  position: absolute;
  z-index: 3;
  right: -12px;
  bottom: -12px;
  display: none;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #f5f5f2;
  color: rgba(38, 35, 35, 0.46);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 21px;
  font-weight: 300;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(38, 35, 35, 0.06);
  pointer-events: none;
}

.hoplo-logo-card:nth-child(1)::after,
.hoplo-logo-card:nth-child(4)::after,
.hoplo-logo-card:nth-child(7)::after {
  display: grid;
}

.hoplo-logo-cloud .hoplo-client-logo {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(154px, 78%) !important;
  max-height: 32px !important;
  object-fit: contain;
  opacity: 0.68;
  filter: grayscale(0.34) saturate(0.58) contrast(0.94);
  mix-blend-mode: multiply;
  transform: translateZ(0) scale(0.98);
  transition:
    opacity 200ms ease,
    filter 240ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  user-select: none;
}

.hoplo-logo-card:hover,
.hoplo-logo-card:focus-visible {
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 16px 34px rgba(38, 35, 35, 0.06);
}

.hoplo-logo-card:hover .hoplo-client-logo,
.hoplo-logo-card:focus-visible .hoplo-client-logo {
  opacity: 1;
  filter: grayscale(0) saturate(1) contrast(1);
  transform: translateZ(0) scale(1.055);
}

.hoplo-logo-card:focus-visible {
  outline: 2px solid rgba(0, 126, 199, 0.58);
  outline-offset: -3px;
}

@media (max-width: 767px) {
  .hoplo-client-stage--cloud {
    width: min(100%, calc(100vw - 32px));
  }

  .hoplo-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hoplo-logo-card {
    min-height: 86px;
    padding: 20px 18px;
  }

  .hoplo-logo-card:nth-child(5n) {
    border-right: 1px solid rgba(38, 35, 35, 0.1);
  }

  .hoplo-logo-card:nth-child(2n) {
    border-right: 0;
  }

  .hoplo-logo-card:nth-last-child(-n + 5) {
    border-bottom: 1px solid rgba(38, 35, 35, 0.1);
  }

  .hoplo-logo-card:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .hoplo-logo-card:nth-child(1),
  .hoplo-logo-card:nth-child(4),
  .hoplo-logo-card:nth-child(5),
  .hoplo-logo-card:nth-child(8),
  .hoplo-logo-card:nth-child(9),
  .hoplo-logo-card:nth-child(12) {
    background: rgba(231, 231, 227, 0.46);
  }

  .hoplo-logo-grid .hoplo-logo-card::after {
    display: none;
  }

  .hoplo-logo-card:nth-child(1)::after,
  .hoplo-logo-card:nth-child(5)::after,
  .hoplo-logo-card:nth-child(7)::after {
    display: grid;
  }

  .hoplo-logo-cloud .hoplo-client-logo {
    max-width: min(130px, 78%) !important;
    max-height: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hoplo-logo-card,
  .hoplo-logo-cloud .hoplo-client-logo {
    transition: none !important;
  }
}

/* Slightly stronger scrim under the headline for legibility over bright sky. */
#site-hero::after {
  background:
    linear-gradient(
      90deg,
      rgba(5, 28, 36, 0.8) 0%,
      rgba(7, 49, 58, 0.58) 34%,
      rgba(9, 72, 82, 0.2) 62%,
      rgba(12, 87, 122, 0) 82%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 46%) !important;
}

/* Cross-document page transitions — progressive enhancement for internal navigation. */
@view-transition {
  navigation: auto;
}

@keyframes hoplo-page-out {
  to {
    opacity: 0;
    transform: scale(0.995) translateY(-4px);
    filter: blur(2px);
  }
}

@keyframes hoplo-page-in {
  from {
    opacity: 0;
    transform: scale(0.995) translateY(10px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

::view-transition-old(root) {
  animation: hoplo-page-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: hoplo-page-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-header {
  view-transition-name: hoplo-header;
}

::view-transition-old(hoplo-header),
::view-transition-new(hoplo-header) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@supports not (view-transition-name: root) {
  .hoplo-home,
  .hoplo-subpage,
  .hoplo-hero-page {
    transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
  }

  html.is-page-leaving .hoplo-home,
  html.is-page-leaving .hoplo-subpage,
  html.is-page-leaving .hoplo-hero-page {
    opacity: 0;
    transform: translateY(-4px);
    filter: blur(2px);
  }
}

/* Runtime fallback is kept outside @supports as well: embedded Chromium can
   expose the CSS property while disabling document.startViewTransition(). */
.hoplo-home,
.hoplo-subpage,
.hoplo-hero-page {
  transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
}

html.is-page-leaving .hoplo-home,
html.is-page-leaving .hoplo-subpage,
html.is-page-leaving .hoplo-hero-page {
  opacity: 0;
  transform: translateY(-4px);
  filter: blur(2px);
}

html.is-page-entering .hoplo-home,
html.is-page-entering .hoplo-subpage,
html.is-page-entering .hoplo-hero-page {
  animation: hoplo-page-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Technology partners — a quiet trust badge over the homepage hero. */
.hoplo-partners {
  position: absolute;
  z-index: 30;
  top: calc(max(100dvh, 720px) - 72px);
  left: 0;
  right: 0;
  padding: 0 24px;
  background: transparent;
  border: 0;
  pointer-events: none;
}

.hoplo-partners-shell {
  width: fit-content;
  max-width: calc(100vw - 48px);
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(5, 28, 36, 0.46);
  box-shadow: 0 6px 20px rgba(5, 28, 36, 0.16);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  pointer-events: auto;
}

.hoplo-partners-shell::after {
  display: none;
}

.hoplo-partners-heading {
  display: none;
}

.hoplo-partners-eyebrow {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(38, 35, 35, 0.54);
}

.hoplo-partners-heading h2,
.hoplo-partners-heading {
  display: none;
}

.hoplo-partners-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hoplo-partner-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 7px;
  background: rgba(251, 251, 248, 0.94);
  box-shadow: none;
  color: #262323;
  text-decoration: none;
  outline: none;
}

.hoplo-partner-card + .hoplo-partner-card {
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.46);
}

.hoplo-partner-card:first-child {
  padding: 0;
  border: 0;
  background: transparent;
}

.hoplo-partner-card:hover,
.hoplo-partner-card:focus-visible {
  z-index: 3;
}

.hoplo-partner-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease;
}

.hoplo-partner-card:hover .hoplo-partner-media,
.hoplo-partner-card:focus-visible .hoplo-partner-media {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 8px 12px rgba(5, 28, 36, 0.18));
}

.hoplo-partner-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(56, 181, 145, 0.42);
}

.hoplo-partner-media img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}

.hoplo-partner-media--openai img {
  width: 76px;
}

.hoplo-partner-media--nvidia img {
  width: 100px;
}

.hoplo-partner-copy {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: min(278px, calc(100vw - 48px));
  padding: 15px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  background: rgba(251, 251, 248, 0.97);
  box-shadow: 0 16px 40px rgba(5, 28, 36, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px) scale(0.97);
  transform-origin: left bottom;
  transition:
    opacity 180ms ease,
    visibility 180ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.hoplo-partner-card:last-child .hoplo-partner-copy {
  right: auto;
  left: 0;
  transform-origin: left bottom;
}

.hoplo-partner-card:hover .hoplo-partner-copy,
.hoplo-partner-card:focus-visible .hoplo-partner-copy {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.hoplo-partner-label {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #16856f;
}

.hoplo-partner-copy h3 {
  margin: 7px 0 0;
  font-family: var(--font-neoris), sans-serif;
  font-size: 16px;
  font-weight: 470;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #262323;
}

.hoplo-partner-copy > p:last-child {
  margin: 8px 0 0;
  font-family: var(--font-neoris), sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(38, 35, 35, 0.68);
}

@media (max-width: 767px) {
  .hoplo-partners {
    top: calc(max(100dvh, 720px) - 68px);
    padding: 0 20px;
  }

  .hoplo-partners-shell {
    max-width: calc(100vw - 40px);
    padding: 7px;
  }

  .hoplo-partners-grid {
    justify-content: flex-start;
    gap: 7px;
  }

  .hoplo-partner-card + .hoplo-partner-card {
    padding-left: 8px;
  }

  .hoplo-partner-media--openai img {
    width: 68px;
  }

  .hoplo-partner-media--nvidia img {
    width: 88px;
  }
}

@media (hover: none) {
  .hoplo-partner-copy {
    display: none;
  }

  .hoplo-partner-card:active .hoplo-partner-media {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(hoplo-header),
  ::view-transition-new(hoplo-header) {
    animation-duration: 1ms !important;
  }

  .hoplo-partner-media,
  .hoplo-partner-copy {
    transition: none !important;
  }
}

/* Keep the orchestration support copy aligned with its centered tablet artifact. */
@media (min-width: 640px) and (max-width: 999px) {
  .orch-support-copy {
    justify-self: center;
  }
}
/* Visible AI-content disclosure for the synthetic homepage hero. */
.hoplo-ai-disclosure {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 92px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(7, 28, 31, 0.38);
  color: rgba(255, 255, 255, 0.82);
  font: 500 10px/1 var(--font-ibm-plex-mono, monospace);
  letter-spacing: 0.025em;
  text-decoration: none;
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hoplo-ai-disclosure:hover {
  background: rgba(7, 28, 31, 0.64);
  color: #fff;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .hoplo-ai-disclosure {
    right: 14px;
    bottom: 80px;
    font-size: 9px;
  }
}