:root {
  --green: #0d5a4a;
  --green-dark: #063f35;
  --green-pale: #eaf3f0;
  --bronze: #a67c52;
}

.module-directory article > b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--green);
  font-size: 16px;
}

.module-directory .module-featured > b { color: #fff; }

.xalo-site-frame {
  display: block;
  width: 100%;
  height: 1180px;
  border: 0;
  background: #fff;
}

.browser-tools {
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}

.xalo-run {
  cursor: pointer;
  padding: 9px 15px;
  border: 1px solid var(--green);
  border-radius: 3px;
  transition: .25s;
}

.xalo-run:hover,
.xalo-run.is-running {
  background: var(--green);
  color: #fff;
  transform: translateY(-1px);
}

.xalo-showcase-frame {
  border-color: #c7d4cf;
  box-shadow: 0 42px 100px rgba(14, 54, 43, .16);
}

.xalo-agent-board {
  min-height: 780px;
  display: grid;
  grid-template-columns: minmax(390px, .84fr) minmax(620px, 1.16fr);
  background: #f5f7f6;
  color: #18211e;
  overflow: hidden;
}

.xalo-agent-visual {
  position: relative;
  min-height: 780px;
  overflow: hidden;
  background: #07110e;
}

.xalo-agent-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}

.xalo-agent-board:hover .xalo-agent-visual > img { transform: scale(1.035); }

.xalo-agent-visual__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 10, 8, .06) 15%, rgba(4, 10, 8, .92) 90%);
}

.xalo-agent-visual__copy {
  position: absolute;
  left: clamp(28px, 4vw, 58px);
  right: clamp(28px, 4vw, 58px);
  bottom: 46px;
  color: #fff;
}

.xalo-agent-visual__copy > span {
  color: #d7b879;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
}

.xalo-agent-visual__copy h3 {
  margin: 18px 0 30px;
  max-width: 430px;
  font: 400 clamp(46px, 4.2vw, 72px)/.96 Georgia, serif;
  letter-spacing: -.04em;
}

.xalo-agent-visual__copy dl {
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.28);
}

.xalo-agent-visual__copy dl > div {
  display: grid;
  grid-template-columns: 95px 1fr;
  gap: 15px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  font-size: 10px;
}

.xalo-agent-visual__copy dt { color: rgba(255,255,255,.58); }
.xalo-agent-visual__copy dd { margin: 0; font-weight: 800; }

.xalo-command {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.xalo-command__head {
  min-height: 86px;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dde4e1;
}

.xalo-command__brand { display: flex; align-items: center; gap: 14px; }
.xalo-command__brand > span {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
}
.xalo-command__brand > div { display: flex; flex-direction: column; gap: 4px; }
.xalo-command__brand strong { font-size: 14px; }
.xalo-command__brand small { color: #737c78; font-size: 9px; }
.xalo-live-state { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.xalo-live-state i { width: 8px; height: 8px; border-radius: 50%; background: #36a566; box-shadow: 0 0 0 6px rgba(54,165,102,.11); }

.xalo-command__flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #dde4e1;
  background: #f4f7f5;
}

.xalo-command__flow article {
  position: relative;
  min-height: 104px;
  padding: 23px 25px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-right: 1px solid #dde4e1;
  transition: .35s ease;
}
.xalo-command__flow article:last-child { border-right: 0; }
.xalo-command__flow span { color: #8c9994; font-size: 9px; font-weight: 800; }
.xalo-command__flow strong { font-size: 14px; }
.xalo-command__flow small { color: #78817e; font-size: 9px; }
.xalo-command__flow .is-done { background: #edf5f1; }
.xalo-command__flow .is-done span,
.xalo-command__flow .is-active span { color: var(--green); }
.xalo-command__flow .is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--green);
}

.xalo-command__content {
  flex: 1;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  min-height: 465px;
}

.xalo-chat {
  min-width: 0;
  display: grid;
  grid-template-rows: 76px 1fr;
  border-right: 1px solid #dde4e1;
}
.xalo-chat > header { display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid #e4e9e7; }
.xalo-chat > header > span { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #a9beb6; border-radius: 50%; color: var(--green); font-size: 9px; font-weight: 900; }
.xalo-chat > header > div { display: flex; flex-direction: column; gap: 4px; }
.xalo-chat > header strong { font-size: 12px; }
.xalo-chat > header small { color: #74807b; font-size: 8px; }
.xalo-chat__messages { padding: 25px; display: flex; flex-direction: column; gap: 13px; background: #f0f4f2; }
.xalo-chat__messages > p { max-width: 86%; margin: 0; padding: 12px 14px; background: #fff; font-size: 10px; line-height: 1.5; box-shadow: 0 8px 25px rgba(20,58,45,.05); }
.xalo-chat__messages .is-user { align-self: flex-end; background: #dcebd8; }
.xalo-chat__messages dl { margin: 0; padding: 14px; border: 1px solid #d5ddda; background: #fff; }
.xalo-chat__messages dl > div { display: grid; grid-template-columns: 72px 1fr; padding: 7px 0; border-bottom: 1px solid #edf0ee; font-size: 9px; }
.xalo-chat__messages dl > div:last-child { border-bottom: 0; }
.xalo-chat__messages dt { color: #75807b; }
.xalo-chat__messages dd { margin: 0; font-weight: 800; }

.xalo-drivers { min-width: 0; padding: 27px; display: flex; flex-direction: column; gap: 11px; background: #fff; }
.xalo-drivers > header { margin-bottom: 5px; }
.xalo-drivers > header small { display: block; color: var(--green); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.xalo-drivers > header strong { display: block; margin-top: 7px; font: 400 22px Georgia, serif; }
.xalo-drivers article { min-height: 72px; padding: 8px; display: grid; grid-template-columns: 58px 1fr 10px; gap: 13px; align-items: center; border: 1px solid #d9e0dd; transition: .3s ease; }
.xalo-drivers article:hover { transform: translateX(-5px); border-color: var(--green); box-shadow: 0 15px 32px rgba(18,58,43,.10); }
.xalo-drivers article > span { width: 58px; height: 54px; display: grid; place-items: end start; padding: 7px; background: center/cover no-repeat; color: #fff; font-size: 9px; font-weight: 900; text-shadow: 0 1px 5px #000; }
.xalo-drivers article:nth-of-type(1) > span { background-image: linear-gradient(0deg,rgba(0,0,0,.55),transparent),url('assets/xalo-taxi-hero.png'); }
.xalo-drivers article:nth-of-type(2) > span { background-image: linear-gradient(0deg,rgba(0,0,0,.55),transparent),url('assets/xalo-airport-transfer.png'); }
.xalo-drivers article:nth-of-type(3) > span { background-image: linear-gradient(0deg,rgba(0,0,0,.55),transparent),url('assets/xalo-krankenfahrt.png'); }
.xalo-drivers article > div { display: flex; flex-direction: column; gap: 5px; }
.xalo-drivers article strong { font-size: 11px; }
.xalo-drivers article small { color: #6d7773; font-size: 8px; }
.xalo-drivers article > i { width: 8px; height: 8px; border-radius: 50%; background: #45a568; }
.xalo-drivers article.is-contacted { border-color: var(--bronze); background: #fbf7f2; }
.xalo-drivers article.is-accepted { border-color: var(--green); background: #edf6f1; transform: translateX(-7px); box-shadow: 0 15px 30px rgba(19,74,53,.12); }

.xalo-command__status {
  min-height: 104px;
  padding: 17px 30px;
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 24px;
  border-top: 1px solid #dde4e1;
  background: #0a1915;
  color: #fff;
}
.xalo-command__status > div:last-child { display: flex; flex-direction: column; gap: 8px; }
.xalo-command__status > div:last-child small { color: #aebbb6; font-size: 9px; }
.xalo-result { display: block; padding: 0; border: 0; color: #fff; font-size: 11px; transition: .3s; }
.xalo-result.is-active { color: #d4b170; }
.xalo-core { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 13px; }
.xalo-core > div { width: 52px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #c7a76a; border-radius: 50%; line-height: .82; }
.xalo-core b { font: 400 10px Georgia, serif; letter-spacing: .08em; }
.xalo-core strong { color: #d5b16f; font-size: 18px; }
.xalo-core p { margin: 0; color: #b6c1bd; font-size: 8px; font-weight: 800; line-height: 1.4; }
.xalo-agent-board.is-live .xalo-live-state i { animation: xalo-pulse 1s ease-in-out infinite; }
.xalo-agent-board.is-live .xalo-command__flow article:nth-child(3) { background: #edf5f1; }
.xalo-agent-board.is-live .xalo-command__flow article:nth-child(3)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--green); }

.investment-ownership { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 25px; }
.investment-ownership > p,
.investment-value { display: flex; align-items: flex-start; gap: 12px; padding: 17px; border: 1px solid #dce4e0; background: #f8faf9; }
.investment-ownership span:last-child,
.investment-value span:last-child { display: flex; flex-direction: column; }
.investment-ownership strong,
.investment-value strong { font-size: 13px; }
.investment-ownership small,
.investment-value small { margin-top: 3px; color: #6b736f; font-size: 10px; }
.investment-item-icon { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #e5f0ea; color: var(--green); font-size: 11px; font-weight: 900; }

@keyframes xalo-pulse { 50% { box-shadow: 0 0 0 10px rgba(54,165,102,.12); } }

@media (max-width: 1180px) {
  .xalo-site-frame { height: 1000px; }
  .xalo-agent-board { grid-template-columns: 1fr; }
  .xalo-agent-visual { min-height: 590px; }
  .xalo-command__content { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .xalo-site-frame { height: 820px; }
  .xalo-agent-visual { min-height: 460px; }
  .xalo-agent-visual__copy h3 { font-size: 46px; }
  .xalo-command__head { padding: 0 20px; }
  .xalo-command__flow { grid-template-columns: 1fr; }
  .xalo-command__flow article { min-height: 82px; border-right: 0; border-bottom: 1px solid #dde4e1; }
  .xalo-command__content { grid-template-columns: 1fr; }
  .xalo-chat { border-right: 0; border-bottom: 1px solid #dde4e1; }
  .xalo-drivers { padding: 22px; }
  .xalo-command__status { grid-template-columns: 1fr; }
  .investment-ownership { grid-template-columns: 1fr; }
}

/* Mobile hardening for the complete proposal */
@media (max-width: 820px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .offer-hero {
    min-height: 0;
    padding-inline: 18px;
  }

  .proposal-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid var(--line);
    border-top: 0;
    background: #fff;
  }

  .proposal-meta span {
    min-width: 0;
    height: auto;
    min-height: 43px;
    padding: 10px 11px;
    justify-content: flex-start;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    white-space: normal;
    line-height: 1.25;
  }

  .proposal-meta span:nth-child(1),
  .proposal-meta span:nth-child(5) {
    grid-column: 1 / -1;
  }

  .proposal-meta span:nth-child(2n + 1) { border-right: 0; }
  .proposal-meta span:nth-child(5) {
    border: 0;
    background: var(--green-pale);
    color: var(--green);
    font-weight: 800;
  }

  .hero-grid {
    min-height: 0;
    gap: 26px;
    padding: 42px 0 48px;
  }

  .system-map {
    width: 100%;
    height: auto;
    margin: 4px 0 0;
    display: grid;
    gap: 13px;
    transform: none;
    background: none;
  }

  .system-node {
    position: static;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    padding: 16px;
    border: 1px solid #d6dfda;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(9, 48, 37, .06);
  }

  .system-node > span {
    grid-row: 1 / 3;
    font-size: 17px;
  }

  .system-node > b {
    margin: 1px 0 9px;
  }

  .system-node .micro-ui {
    grid-column: 2;
    width: 100%;
    min-height: 116px;
    box-shadow: none;
  }

  .system-path { display: none; }

  .platform-block {
    padding-left: 16px;
    padding-right: 16px;
  }

  .browser-frame {
    margin-left: 0;
    margin-right: 0;
    border: 1px solid #c9d2cd;
    border-radius: 10px;
    overflow: hidden;
  }

  .browser-chrome {
    height: 48px;
    padding-inline: 12px;
    gap: 7px;
  }

  .browser-dots { gap: 5px; }
  .browser-dots i { width: 8px; height: 8px; }
  .browser-tools { white-space: nowrap; }

  .xalo-site-frame { height: 760px; }

  .timeline-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow: visible;
    padding: 0;
  }

  .timeline-track article {
    min-width: 0;
    padding: 20px;
    border: 1px solid #d5e0da;
    background: rgba(255, 255, 255, .72);
  }

  .timeline-track h3 { margin-bottom: 10px; }
  .timeline-track i { display: none; }
}

@media (max-width: 520px) {
  .hero-copy h1 {
    font-size: clamp(36px, 11vw, 43px);
    overflow-wrap: anywhere;
  }

  .hero-lead { font-size: 17px; }
  .hero-next { padding: 34px 0 40px; }
  .hero-next strong { font-size: 22px; }

  .browser-chrome {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .browser-url {
    padding-inline: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .xalo-agent-visual__copy h3 { font-size: 39px; }
  .xalo-agent-visual__copy dl > div { grid-template-columns: 78px 1fr; }
}