/* Visual direction: website/index.html — dark surfaces, blue/violet light,
   translucent cards, gradient type. Layout and local interactions use styles.css. */
:root {
  color-scheme: dark;
  --paper: #0a0d14;
  --white: #101827;
  --ink: #f1f5fc;
  --muted: #99a8bf;
  --green: #60a5fa;
  --lime: #a78bfa;
  --line: #ffffff12;
  --soft: #121e33;
  --blue: #60a5fa;
  --violet: #b69bff;
  --cyan: #38bdf8;
  --gradient-brand: linear-gradient(
    115deg,
    #60a5fa 5%,
    #ad8af8 53%,
    #3ad5c9 100%
  );
}
body {
  background: #0a0d14;
}
/* Keep scrolling available without a gray browser scrollbar over the page. */
html,
body,
dialog {
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
dialog::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
::selection {
  background: #3b82f655;
  color: #fff;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
  outline-color: #60a5fa;
}
.container {
  max-width: 1328px;
}
.site-header {
  background: #0a0d14df;
  border-color: #ffffff12;
}
.nav-bar {
  height: 80px;
}
.brand img {
  border-radius: 10px;
  box-shadow: 0 0 20px #3b82f626;
}
.brand > span {
  font-size: 16px;
}
.brand small {
  font-size: 8px;
  letter-spacing: 1.6px;
  color: #768aa8;
}
nav {
  gap: 26px;
  margin-right: 17px;
}
nav a {
  color: #a2aec1;
}
nav a:hover,
nav a.active,
.text-link:hover {
  color: #7db5ff;
}
.button {
  background: linear-gradient(130deg, #3b82f6, #2563eb);
  border: 1px solid #ffffff14;
  box-shadow: 0 7px 24px #2563eb26;
  border-radius: 9px;
}
.button:hover {
  background: linear-gradient(130deg, #60a5fa, #2563eb);
  box-shadow: 0 10px 30px #3b82f64d;
}
.hero {
  background:
    radial-gradient(ellipse at 78% 30%, #2563eb12, transparent 50%),
    radial-gradient(ellipse at 3% 90%, #7c3aed0c, transparent 50%), #0a0d14;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(#ffffff03 1px, transparent 1px),
    linear-gradient(90deg, #ffffff03 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(#000, transparent);
}
.hero-grid {
  min-height: 690px;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 15px;
  position: relative;
}
.hero-copy {
  padding: 54px 0 48px;
}
.hero-copy > .eyebrow {
  display: inline-flex;
  font-size: 11px;
  letter-spacing: 0.5px;
  border: 1px solid #3b82f633;
  color: #7dd3fc;
  background: #3b82f60d;
  padding: 8px 13px;
  border-radius: 30px;
}
.status-dot {
  background: #34d399;
  box-shadow: 0 0 10px #34d39966;
}
.hero h1 {
  margin: 26px 0 23px;
  font-size: 60px;
  line-height: 1.17;
  letter-spacing: -1.7px;
  font-weight: 750;
}
.hero-audience {
  display: block;
  font-size: 23px;
  font-weight: 500;
  color: #c5d0e2;
  letter-spacing: 0.2px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.hero-headline {
  display: block;
}
.brand-gradient {
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.hero-description {
  max-width: 510px;
  color: #99a8bf;
  font-size: 15px;
  line-height: 1.95;
}
.hero-description strong {
  color: #c4b5fd;
  font-weight: 600;
}
.hero-description strong:first-child {
  color: #7db5ff;
}
.hero-actions {
  margin-top: 28px;
  gap: 24px;
}
.hero-actions .text-link {
  padding: 15px 20px;
  border: 1px solid #ffffff19;
  background: #ffffff03;
  border-radius: 9px;
  font-weight: 500;
}
.play-icon {
  border-color: #ffffff2b;
  color: #aac2e7;
}
.hero-bottom {
  margin-top: 33px;
  border-top: 1px solid #ffffff12;
  padding-top: 24px;
  gap: 0;
  max-width: 515px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
}
.hero-bottom > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.hero-bottom > div + div {
  border-left: 1px solid #ffffff12;
  padding-left: 23px;
}
.hero-bottom b {
  color: #7db5ff;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.5px;
}
.hero-bottom div:nth-child(2) b {
  color: #b49bfc;
}
.hero-bottom div:nth-child(3) b {
  color: #61d5c6;
  font-size: 21px;
  padding-top: 4px;
}
.hero-bottom span {
  font-size: 10px;
  color: #8292ab;
  line-height: 1.7;
  white-space: nowrap;
}
.hero-foot {
  position: relative;
  color: #7c8ca4;
  border-color: #ffffff12;
  font-size: 11px;
}
.hero-foot a {
  color: #94b3df;
}
.network-art {
  height: 570px;
}
.network-grid {
  background-image:
    linear-gradient(#60a5fa09 1px, transparent 1px),
    linear-gradient(90deg, #60a5fa09 1px, transparent 1px);
}
.orbit {
  border-color: #60a5fa25;
}
.orbit-two {
  border-color: #a78bfa29;
}
.network-center {
  background: radial-gradient(
    circle,
    #243d60d9 15%,
    #1c304c80 42%,
    #1c304c00 71%
  );
  width: 230px;
  height: 230px;
  gap: 11px;
  top: 49%;
}
.network-center img {
  width: 64px;
  height: 64px;
  border-radius: 17px;
  box-shadow: 0 0 35px #3b82f64d;
}
.network-center b {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.network-center span {
  font-size: 10px;
  color: #8ca0be;
  letter-spacing: 3px;
}
.network-tag {
  background: #101a2cdb;
  backdrop-filter: blur(16px);
  border-color: #ffffff20;
  box-shadow:
    0 12px 32px #00000045,
    inset 0 1px #ffffff0a;
  padding: 15px;
  gap: 10px;
  border-radius: 12px;
}
.network-tag b {
  font-size: 13px;
  color: #e8effb;
}
.network-tag small {
  font-size: 9px;
  color: #8194b2;
}
.tag-icon {
  background: #3b82f61a;
  color: #7dd3fc;
  border: 1px solid #3b82f62b;
}
.network-tag i {
  background: #38bdf8;
  box-shadow: 0 0 9px #38bdf88c;
}
.tag-person {
  top: 18%;
  left: 1%;
}
.tag-org {
  top: 25%;
  right: -1%;
}
.tag-org .tag-icon {
  background: #8b5cf619;
  color: #c4b5fd;
  border-color: #8b5cf633;
}
.tag-org i {
  background: #c084fc;
  box-shadow: 0 0 9px #c084fc80;
}
.tag-agent {
  bottom: 21%;
  left: 0;
}
.tag-agent .tag-icon {
  background: #10b98119;
  color: #6ee7b7;
  border-color: #10b98133;
}
.tag-agent i {
  background: #34d399;
  box-shadow: 0 0 9px #34d39980;
}
.network-tag em {
  background: #10b98117;
  color: #73cbb6;
  border: 1px solid #10b98126;
}
.tag-chain {
  right: -1%;
  bottom: 14%;
  animation-delay: -3s;
}
.tag-chain .tag-icon {
  background: #f59e0b14;
  color: #fcd34d;
  border-color: #f59e0b30;
}
.tag-chain i {
  background: #fbbf24;
  box-shadow: 0 0 9px #fbbf2480;
}
.art-coordinate {
  color: #5d7598;
}
.coord-top {
  left: 12%;
  top: 26px;
  font-size: 7px;
}
.coord-bottom {
  bottom: 16px;
  left: 17%;
  font-size: 8px;
  letter-spacing: 1.4px;
}
.section {
  position: relative;
}
.section-kicker {
  color: #65b7f4;
  font-size: 11px;
}
.section h2 {
  font-weight: 650;
}
.section-heading > p {
  font-size: 14px;
}

/* The two engines are visible immediately after the main positioning. */
.intelligence {
  padding: 85px 0;
  background:
    radial-gradient(ellipse at 20% 55%, #2563eb0b, transparent 55%),
    radial-gradient(ellipse at 90% 70%, #7c3aed0e, transparent 50%), #0c111c;
  border-block: 1px solid var(--line);
}
.engine-heading {
  text-align: center;
  margin: 0 auto 40px;
}
.engine-heading .eyebrow {
  justify-content: center;
}
.engine-heading h2 {
  font-size: 33px;
  line-height: 1.6;
}
.engine-heading > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
  margin: 17px auto 0;
}
.ai-text {
  color: var(--blue);
}
.web3-text {
  color: var(--violet);
}
.engine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
}
.engine-card {
  --engine-color: #7db5ff;
  padding: 32px;
  background: linear-gradient(145deg, #14243b8c, #101622d9);
  border: 1px solid #60a5fa26;
  border-radius: 17px;
  position: relative;
  overflow: hidden;
}
.engine-web3 {
  --engine-color: #b69bff;
  background: linear-gradient(145deg, #271b4180, #111623e6);
  border-color: #a78bfa26;
}
.engine-header {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
}
.engine-icon {
  width: 48px;
  height: 48px;
  background: #3b82f61a;
  border: 1px solid #3b82f633;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--engine-color);
}
.engine-web3 .engine-icon {
  background: #8b5cf61a;
  border-color: #8b5cf633;
}
.engine-kicker {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--engine-color);
}
.engine-header h3 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 7px;
}
.engine-watermark {
  position: absolute;
  right: -10px;
  top: -18px;
  font-size: 74px;
  font-weight: 800;
  opacity: 0.045;
  color: var(--engine-color);
  pointer-events: none;
}
.engine-intro {
  font-size: 13px;
  color: #95a5bf;
  line-height: 1.9;
  margin-top: 23px;
}
.engine-features {
  list-style: none;
  padding: 0;
  margin: 27px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.engine-features li {
  display: flex;
  gap: 12px;
}
.engine-features li > svg {
  width: 20px;
  height: 20px;
  padding: 3px;
  margin-top: 1px;
  background: #60a5fa17;
  border-radius: 50%;
  color: var(--engine-color);
}
.engine-web3 .engine-features li > svg {
  background: #a78bfa17;
}
.engine-features b {
  font-size: 14px;
  font-weight: 550;
  color: #e1e9f5;
  line-height: 1.7;
}
.engine-features p {
  font-size: 12px;
  color: #8f9fb8;
  line-height: 1.9;
  margin-top: 5px;
}
.engine-features em {
  font-style: normal;
  font-size: 9px;
  font-weight: 400;
  border: 1px solid #60a5fa30;
  background: #60a5fa0c;
  color: #7da5d5;
  padding: 2px 5px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
}
.engine-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid #ffffff0c;
  color: var(--engine-color);
  font-size: 12px;
}
.engine-link svg {
  width: 18px;
  height: 18px;
  transition: translate 0.2s;
}
.engine-link:hover svg {
  translate: 4px 0;
}
.engine-principle {
  display: flex;
  gap: 9px;
  justify-content: center;
  align-items: center;
  color: #8392a9;
  font-size: 11px;
  line-height: 1.8;
  margin-top: 27px;
  text-align: center;
}
.engine-principle svg {
  width: 15px;
  height: 15px;
  color: #91a4c0;
}

/* Apply the same surface, text and icon palette to the remaining content. */
.capabilities,
.workflow,
.scenarios,
.trust,
.faq {
  background: #0a0d14;
}
.capability-card {
  background: linear-gradient(145deg, #131e30, #101722);
  border-color: #ffffff12;
}
.capability-card:hover {
  border-color: #3b82f640;
  box-shadow: 0 10px 30px #0003;
}
.card-number {
  color: #566d8e;
}
.capability-card h3 {
  font-size: 19px;
}
.capability-card > p {
  font-size: 13px;
  line-height: 1.9;
  min-height: 100px;
}
.card-label {
  color: #7da6df;
  font-size: 12px;
}
.prompt-bubble {
  background: linear-gradient(120deg, #2461b9, #3548a2);
  box-shadow: 0 7px 20px #0003;
}
.brief-sheet {
  background: #172237;
  box-shadow: 0 8px 20px #0003;
  border-color: #ffffff17;
}
.brief-sheet > span {
  color: #a0b4d2;
}
.brief-sheet i {
  background: #3b82f61c;
  color: #8ab9f4;
}
.brief-sheet b {
  background: #334560;
}
.match-line,
.delivery-line {
  background: #41618a;
}
.match-person {
  background: #17253a;
  border-color: #385477;
  color: #8db5ed;
  box-shadow: 0 5px 16px #0003;
}
.match-hub {
  background: #1d3556;
  border-color: #15243c;
  outline-color: #355782;
  color: #96c4ff;
}
.match-caption,
.delivery-node small {
  color: #8b9cb5;
}
.match-caption span {
  color: #607794;
}
.delivery-node > span {
  background: #1d3556;
  border-color: #111c2b;
  color: #8fbdf7;
}
.delivery-node:last-child > span {
  background: #315bd7;
}
.workflow {
  background: #0d1421;
  border-block: 1px solid #ffffff08;
}
.step {
  padding-block: 20px;
}
.step.active {
  background: #3b82f612;
  border-color: #3b82f62e;
}
.step:hover {
  background: #3b82f609;
}
.step > span {
  color: #627a9a;
}
.step b {
  font-size: 15px;
}
.step small {
  color: #8797ae;
  font-size: 11px;
}
.workflow-preview {
  background: #101a2a;
  border-color: #3b82f624;
  box-shadow: 0 20px 45px #0003;
}
.preview-top {
  background: #142033;
  border-color: #ffffff0d;
}
.preview-top > span {
  color: #aac3e4;
}
.preview-top i {
  background: #60a5fa;
  box-shadow: 0 0 8px #60a5fa66;
}
.preview-top small,
.preview-breadcrumb {
  color: #758ba9;
}
.pill {
  background: #3b82f61c;
  color: #8cbaff;
}
.preview-body > p {
  color: #91a4bf;
  font-size: 12px;
}
.mock-input {
  background: #0c1422;
  border-color: #ffffff14;
  color: #afbed4;
  font-size: 12px;
}
.ai-response {
  background: #3b82f610;
  border: 1px solid #3b82f617;
}
.ai-response > svg,
.ai-response b {
  color: #8abafb;
}
.ai-response p {
  color: #8da3c3;
  font-size: 11px;
}
.mock-tags > span {
  border-color: #ffffff15;
  color: #8da3be;
}
.preview-footer {
  border-color: #ffffff0d;
  color: #7189a7;
}
.mock-row {
  border-color: #ffffff14;
}
.mock-avatar {
  background: #3b82f61a;
  color: #8bb8fb;
}
.mock-row small,
.mock-caption,
.mock-line span {
  color: #90a0b9;
}
.mock-row > span:last-child,
.mock-line b,
.mock-stars {
  color: #8db8f8;
}
.mock-line {
  border-color: #ffffff0d;
}
.scenarios {
  padding-top: 85px;
}
.scenario-tabs button {
  color: #93a3ba;
  font-size: 13px;
}
.scenario-tabs button.active {
  color: #8db9ff;
  border-color: #60a5fa;
}
.scenario-tabs button span {
  background: #3b82f61a;
  color: #80a8de;
}
.scenario-panel {
  background: linear-gradient(120deg, #102343, #161932);
  border: 1px solid #3b82f626;
  border-radius: 16px;
}
.scenario-overline {
  color: #8aaeee;
}
.scenario-copy > p {
  color: #a0b1cd;
  font-size: 13px;
}
.scenario-copy li {
  color: #a6b6d5;
  font-size: 11px;
}
.scenario-copy li:before {
  background: #8b9df4;
}
.light-link {
  color: #b5ccff;
  font-size: 12px;
}
.light-link:hover {
  color: #8eb4ff;
}
.scenario-disclaimer {
  color: #6f83aa;
  font-size: 9px;
}
.scenario-art {
  background: radial-gradient(ellipse at 47% 47%, #5559ba25 0, transparent 68%);
}
.material-grid {
  background-image:
    linear-gradient(#9db3f214 1px, transparent 1px),
    linear-gradient(90deg, #9db3f214 1px, transparent 1px);
}
.material-block {
  border-color: #8da5ffb3;
  background: linear-gradient(135deg, #6588edb3, #7e5bca80);
  box-shadow:
    15px 15px 0 #5768c029,
    30px 30px 0 #5768c00d;
}
.block-one {
  background: linear-gradient(135deg, #8aadf7bf, #a580e780);
}
.material-block:after {
  border-color: #c4caff33;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 9px,
    #dae1ff1a 10px
  );
}
.material-label {
  background: #1a2a4e;
  border-color: #94a7e54d;
  color: #b3c7f0;
}
.material-label:before {
  background: #94a7e550;
}
.material-caption {
  color: #758bb7;
}
.scenario-panel[data-scene="1"] .material-block {
  background: linear-gradient(135deg, #71bad0aa, #7273c780);
}
.scenario-panel[data-scene="2"] .material-block {
  background: linear-gradient(135deg, #b296e8aa, #5f8dcc80);
}
.trust {
  background: #0e1421;
}
.trust-intro > p {
  font-size: 13px;
}
.trust-seal > svg {
  background: #8b5cf615;
  border-color: #8b5cf62b;
  color: #b69bff;
}
.trust-seal b {
  font-size: 12px;
}
.trust-seal span {
  color: #7b8eac;
  font-size: 10px;
}
.trust-icon {
  border-color: #ffffff12;
  color: #a893ea;
  background: #8b5cf60a;
}
.trust-items p {
  font-size: 12px;
  line-height: 1.9;
}
.agent-section {
  background:
    radial-gradient(ellipse at 20% 50%, #8b5cf60c, transparent 60%), #111624;
  border-color: #ffffff0d;
}
.agent-emblem {
  border-color: #8b5cf633;
  outline-color: #8b5cf626;
  background: radial-gradient(#8b5cf619, transparent);
}
.agent-emblem svg {
  color: #a78bfa;
}
.agent-emblem span {
  color: #8676b6;
}
.agent-copy .eyebrow {
  color: #9a88cd;
}
.plan-badge {
  background: #8b5cf619;
  color: #ac99e1;
}
.agent-copy > p {
  color: #9ca5bb;
  font-size: 13px;
}
.agent-tags {
  color: #b2a3d6;
  font-size: 11px;
}
.agent-copy > small {
  color: #76809a;
  font-size: 10px;
}
.agent-layout > .text-link {
  color: #b8a7e5;
  font-size: 12px;
}
summary {
  font-size: 14px;
  padding-block: 23px;
}
summary > span {
  color: #7b9ccb;
}
.faq-list details > p {
  font-size: 13px;
}
.closing {
  background:
    radial-gradient(ellipse at 20% 30%, #2563eb1a, transparent 55%),
    linear-gradient(110deg, #111d35, #19172f);
  border-color: #ffffff0d;
}
.closing h2 {
  font-size: 36px;
}
.closing .eyebrow {
  color: #7b9bc9;
}
.closing p {
  color: #8395b2;
}
.closing-ring {
  border-color: #9c7ef026;
  box-shadow:
    0 0 0 65px #161b3200,
    0 0 0 66px #9c7ef019,
    0 0 0 130px #161b3200,
    0 0 0 131px #9c7ef013;
}
footer {
  background: #080c13;
}
.footer-links {
  color: #96a3ba;
  font-size: 12px;
}
.footer-links button {
  font-size: 12px;
}
.footer-bottom {
  color: #647794;
  font-size: 10px;
}
.footer-bottom a {
  color: #889fbe;
}
dialog {
  background: #101827;
  color: #eff4fd;
  border-color: #ffffff24;
  box-shadow: 0 35px 100px #0009;
}
dialog::backdrop {
  background: #030713b8;
}
.dialog-close {
  background: #ffffff08;
  color: #9bb1cf;
}
.dialog-close:hover {
  background: #3b82f626;
}
.role-options {
  background: #0b1220;
  border: 1px solid #ffffff0d;
}
.role-options button {
  color: #8c9db8;
}
.role-options button.active {
  background: #243e68;
  color: #c6dfff;
  box-shadow: none;
}
#role-checklist li {
  color: #a1bbdf;
}
#brief-form label span {
  color: #7c90ad;
}
textarea {
  background: #0a1220;
  color: #dce6f6;
  border-color: #ffffff1f;
}
textarea::placeholder {
  color: #627591;
}
.form-note {
  color: #7e8faa;
}
.form-feedback {
  color: #82b7ff;
}

@media (min-width: 1500px) {
  .hero h1 {
    font-size: 65px;
  }
  .hero-grid {
    min-height: 710px;
  }
}
@media (max-width: 1100px) {
  .brand > span {
    font-size: 14px;
  }
  nav {
    gap: 18px;
    margin-right: 3px;
  }
  nav a {
    font-size: 12px;
  }
  .hero-grid {
    min-height: 650px;
  }
  .hero h1 {
    font-size: 52px;
  }
  .hero-audience {
    font-size: 19px;
  }
  .hero-description {
    font-size: 14px;
  }
  .hero-bottom b {
    font-size: 23px;
  }
  .hero-bottom div:nth-child(3) b {
    font-size: 18px;
  }
  .hero-bottom > div + div {
    padding-left: 17px;
  }
  .hero-bottom span {
    font-size: 9px;
  }
  .network-art {
    height: 520px;
  }
  .network-tag {
    padding: 12px;
    gap: 8px;
  }
  .network-tag b {
    font-size: 11px;
  }
  .network-tag small {
    font-size: 8px;
  }
  .tag-person {
    left: -2%;
  }
  .tag-org {
    right: -2%;
  }
  .tag-agent {
    left: -2%;
  }
  .tag-chain {
    right: -2%;
  }
  .hero-actions .text-link {
    font-size: 11px;
    padding: 13px;
  }
  .engine-heading h2 {
    font-size: 29px;
  }
  .engine-card {
    padding: 27px;
  }
  .engine-header h3 {
    font-size: 20px;
  }
  .capability-card > p {
    min-height: 125px;
  }
  .step small {
    font-size: 10px;
  }
  .scenario-copy > p {
    font-size: 12px;
  }
}
@media (max-width: 800px) {
  .nav-bar {
    height: 74px;
  }
  nav {
    top: 74px;
    background: #0d1422;
    border-color: #ffffff14;
    box-shadow: 0 20px 35px #0006;
  }
  nav a {
    font-size: 14px;
  }
  .hero-grid {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-copy {
    padding: 45px 0 12px;
  }
  .hero h1 {
    font-size: 56px;
    margin: 24px 0;
  }
  .hero-audience {
    font-size: 23px;
    margin-bottom: 13px;
  }
  .hero-description {
    max-width: 540px;
    margin: auto;
  }
  .hero-bottom {
    margin: 28px auto 0;
    text-align: center;
    max-width: 460px;
  }
  .hero-bottom > div + div {
    padding-left: 0;
  }
  .hero-bottom b {
    font-size: 25px;
  }
  .hero-bottom span {
    font-size: 10px;
  }
  .hero-bottom div:nth-child(3) b {
    font-size: 21px;
  }
  .network-art {
    width: min(540px, 100%);
    height: 475px;
    margin-top: 15px;
  }
  .network-center img {
    width: 60px;
    height: 60px;
  }
  .network-tag b {
    font-size: 12px;
  }
  .network-tag small {
    font-size: 9px;
  }
  .tag-person {
    left: 2%;
  }
  .tag-org {
    right: 0;
  }
  .tag-agent {
    left: 0;
  }
  .tag-chain {
    right: 1%;
  }
  .coord-top {
    top: 10px;
  }
  .coord-bottom {
    bottom: 3px;
  }
  .intelligence {
    padding: 65px 0;
  }
  .engine-heading h2 {
    font-size: 27px;
  }
  .engine-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .engine-card {
    padding: 30px;
  }
  .engine-header h3 {
    font-size: 23px;
  }
  .engine-features b {
    font-size: 15px;
  }
  .engine-features p {
    font-size: 13px;
  }
  .engine-intro {
    font-size: 14px;
  }
  .capability-card > p {
    min-height: 0;
  }
  .step {
    padding: 14px 6px;
  }
  .step b {
    font-size: 12px;
  }
  .section-heading > p {
    font-size: 12px;
  }
  .trust-items p {
    font-size: 11px;
  }
  .agent-layout > .text-link {
    font-size: 12px;
  }
  .closing h2 {
    font-size: 31px;
  }
}
@media (max-width: 520px) {
  .brand > span {
    font-size: 13px;
  }
  .brand small {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .hero-copy {
    padding: 36px 0 12px;
  }
  .hero-copy > .eyebrow {
    font-size: 9px;
    padding: 7px 10px;
    letter-spacing: 0;
  }
  .hero h1 {
    font-size: clamp(39px, 11.5vw, 50px);
    line-height: 1.2;
    letter-spacing: -1px;
    margin: 23px 0 19px;
  }
  .hero-audience {
    font-size: clamp(15px, 4.4vw, 20px);
    line-height: 1.5;
    letter-spacing: 0;
    margin-bottom: 16px;
  }
  .hero-description {
    font-size: 12px;
    line-height: 1.95;
  }
  .hero-actions {
    gap: 13px;
    margin-top: 25px;
  }
  .hero-actions .button {
    font-size: 11px;
    padding: 13px 15px;
  }
  .hero-actions .text-link {
    font-size: 10px;
    padding: 12px;
  }
  .hero-bottom {
    margin-top: 25px;
    padding-top: 21px;
    grid-template-columns: 1fr 1fr 1.25fr;
  }
  .hero-bottom b {
    font-size: 24px;
  }
  .hero-bottom div:nth-child(3) b {
    font-size: 18px;
  }
  .hero-bottom span {
    font-size: 8px;
  }
  .hero-bottom > div {
    gap: 5px;
  }
  .network-art {
    height: 365px;
    margin-top: 23px;
    margin-bottom: 22px;
  }
  .network-tag {
    padding: 10px;
    gap: 7px;
    border-radius: 9px;
  }
  .network-tag b {
    font-size: 10px;
  }
  .network-tag small {
    font-size: 7px;
  }
  .tag-icon {
    height: 28px;
    width: 28px;
    border-radius: 8px;
  }
  .network-tag i {
    display: none;
  }
  .network-tag em {
    font-size: 6px;
    padding: 1px 3px;
  }
  .tag-person {
    top: 15%;
    left: 0;
  }
  .tag-org {
    top: 23%;
    right: -2px;
  }
  .tag-agent {
    left: 0;
    bottom: 22%;
  }
  .tag-chain {
    right: -2px;
    bottom: 11%;
  }
  .network-center {
    width: 170px;
    height: 170px;
    gap: 8px;
  }
  .network-center img {
    width: 49px;
    height: 49px;
    border-radius: 13px;
  }
  .network-center b {
    font-size: 11px;
    margin-top: 2px;
  }
  .network-center span {
    font-size: 7px;
    letter-spacing: 2px;
  }
  .coord-top {
    top: 0;
    left: 5%;
    font-size: 5px;
    letter-spacing: 1.15px;
  }
  .coord-bottom {
    bottom: -5px;
    left: 9%;
    font-size: 6px;
    letter-spacing: 1px;
  }
  .hero-foot {
    font-size: 8px;
  }
  .hero-foot a {
    gap: 8px;
  }
  .intelligence {
    padding: 53px 0;
  }
  .engine-heading {
    margin-bottom: 26px;
  }
  .engine-heading h2 {
    font-size: 26px;
    line-height: 1.55;
    max-width: 330px;
    margin: auto;
  }
  .engine-heading > p {
    font-size: 12px;
    text-align: center;
    max-width: 330px;
  }
  .section-kicker {
    font-size: 9px;
  }
  .engine-card {
    padding: 24px 21px;
    border-radius: 13px;
  }
  .engine-header {
    gap: 12px;
  }
  .engine-icon {
    width: 43px;
    height: 43px;
    border-radius: 11px;
  }
  .engine-kicker {
    font-size: 8px;
    letter-spacing: 1.1px;
  }
  .engine-header h3 {
    font-size: 19px;
    margin-top: 6px;
  }
  .engine-intro {
    font-size: 12px;
    margin-top: 20px;
  }
  .engine-features {
    gap: 19px;
    margin: 22px 0;
  }
  .engine-features li {
    gap: 9px;
  }
  .engine-features b {
    font-size: 13px;
  }
  .engine-features p {
    font-size: 11px;
  }
  .engine-features em {
    font-size: 8px;
  }
  .engine-link {
    font-size: 11px;
  }
  .engine-principle {
    font-size: 10px;
    text-align: left;
    align-items: flex-start;
  }
  .engine-principle svg {
    margin-top: 3px;
  }
  .capability-card > p {
    font-size: 12px;
    min-height: 0;
  }
  .section-heading > p {
    font-size: 12px;
  }
  .step b {
    font-size: 9px;
  }
  .step {
    padding: 12px 3px;
  }
  .preview-body > p,
  .mock-input {
    font-size: 10px;
  }
  .ai-response p {
    font-size: 10px;
  }
  .scenarios {
    padding-top: 53px;
  }
  .scenario-tabs button {
    font-size: 9px;
  }
  .scenario-copy > p {
    font-size: 12px;
  }
  .scenario-copy li {
    font-size: 10px;
  }
  .scenario-disclaimer {
    font-size: 8px;
  }
  .trust-intro > p {
    font-size: 12px;
  }
  .trust-items p {
    font-size: 12px;
  }
  .agent-copy > p {
    font-size: 12px;
  }
  .agent-tags {
    font-size: 10px;
    gap: 14px;
  }
  .agent-copy > small {
    font-size: 9px;
  }
  summary {
    font-size: 12px;
    padding-block: 20px;
  }
  .faq-list details > p {
    font-size: 12px;
  }
  .closing h2 {
    font-size: 27px;
  }
  .footer-links,
  .footer-links button {
    font-size: 11px;
  }
  .footer-bottom {
    font-size: 9px;
  }
  .footer-bottom > span:nth-child(2) {
    font-size: 8px;
  }
}
@media (max-width: 350px) {
  .brand > span {
    font-size: 12px;
  }
  .brand small {
    font-size: 5px;
  }
  .hero-actions {
    gap: 9px;
  }
  .hero-actions .button {
    font-size: 10px;
    padding: 12px 13px;
  }
  .hero-actions .text-link {
    font-size: 9px;
    padding: 11px 9px;
  }
  .hero-bottom span {
    font-size: 7px;
  }
  .hero-bottom div:nth-child(3) b {
    font-size: 16px;
  }
  .network-art {
    height: 340px;
  }
  .tag-icon {
    width: 23px;
    height: 23px;
  }
  .network-tag {
    gap: 5px;
    padding: 8px;
  }
  .network-tag b {
    font-size: 9px;
  }
  .network-tag small {
    font-size: 6px;
  }
  .tag-person {
    top: 13%;
  }
  .tag-org {
    top: 28%;
  }
  .tag-agent {
    bottom: 22%;
  }
  .tag-chain {
    bottom: 8%;
  }
  .network-center img {
    width: 42px;
    height: 42px;
  }
  .network-center b {
    font-size: 10px;
  }
  .engine-heading h2 {
    font-size: 24px;
  }
  .engine-card {
    padding: 22px 17px;
  }
  .engine-header h3 {
    font-size: 17px;
  }
  .engine-features b {
    font-size: 12px;
  }
  .engine-features em {
    font-size: 7px;
  }
  .agent-tags {
    font-size: 9px;
    gap: 10px;
  }
  .scenario-tabs button {
    font-size: 8px;
  }
}