/* The next connection: a spatial MCP network in the vlows visual language. */
.agentic-section { padding:clamp(64px,7vw,104px) var(--page-gutter) clamp(58px,6vw,88px); background:#080f1a; color:#eff4fa; border-bottom:1px solid #ffffff12; }
.agentic-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(36px,7vw,100px); }
.agentic-copy { min-width:0; }
.agentic-eyebrow { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin:0 0 26px; font-size:9px; font-weight:500; line-height:1.6; letter-spacing:.15em; color:#9baebe; }
.agentic-eyebrow span { color:#76d4c7; letter-spacing:.09em; }
.agentic-section h2 { font-size:clamp(36px,4.5vw,64px); font-weight:500; line-height:1.07; letter-spacing:-.055em; }
.agentic-section h2 span { color:#76d4c7; }
.agentic-description { max-width:510px; margin:26px 0 0; color:#a2b2c1; font-size:14px; line-height:1.85; }
.agentic-connection { min-width:0; margin:0; }

.agentic-connection figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; color:#a2b2c1; font-size:11px; line-height:1.5; }
.agentic-caption-center { color:#70889e; font-size:10px; }
.agentic-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,58px); margin-top:64px; }
.agentic-capabilities article { border-top:1px solid #ffffff1a; padding-top:22px; }
.agentic-index { font-size:9px; letter-spacing:.12em; color:#76d4c7; }
.agentic-capabilities h3 { margin:20px 0 12px; font-size:20px; font-weight:500; line-height:1.35; letter-spacing:-.035em; }
.agentic-capabilities p { max-width:350px; margin:0; font-size:13px; line-height:1.85; color:#a2b2c1; }

@media(max-width:900px) {
  .agentic-heading { grid-template-columns:minmax(0,1fr); gap:30px; }
  .agentic-description { max-width:590px; }
  .agentic-connection { width:100%; max-width:620px; justify-self:center; }

  .agentic-capabilities { margin-top:48px; gap:24px; }
  .agentic-capabilities h3 { font-size:18px; }
}
@media(max-width:620px) {
  .agentic-section { padding-block:56px; }
  .agentic-eyebrow { gap:8px 16px; margin-bottom:22px; font-size:8px; }
  .agentic-section h2 { font-size:clamp(32px,9vw,48px); }
  .agentic-description { font-size:13px; margin-top:22px; }
  .agentic-heading { gap:28px; }

  .agentic-connection figcaption { font-size:10px; }
  .agentic-caption-center { display:none; }
  .agentic-capabilities { grid-template-columns:minmax(0,1fr); gap:26px; margin-top:38px; }
  .agentic-capabilities article { padding-top:18px; }
  .agentic-capabilities h3 { margin-top:14px; font-size:20px; }
  .agentic-capabilities p { max-width:450px; }
}

/* A shared protocol at the centre of a spatial network. */
.mcp-scene { position:relative; height:clamp(420px,36vw,580px); perspective:1000px; overflow:hidden; isolation:isolate; --mcp-orbit-size:clamp(300px,32vw,500px); --mcp-core-size:clamp(88px,8vw,122px); }
.mcp-aura { position:absolute; inset:0; background:radial-gradient(ellipse at center,#2c93961a,transparent 62%); }
.mcp-world { position:absolute; left:50%; top:50%; width:var(--mcp-orbit-size); height:var(--mcp-orbit-size); margin-left:calc(var(--mcp-orbit-size) * -.5); margin-top:calc(var(--mcp-orbit-size) * -.5); transform:rotateX(-15deg) rotateY(-15deg); transform-style:preserve-3d; }
.mcp-orbit-plane { position:absolute; inset:0; transform-style:preserve-3d; }
.mcp-plane-0 { transform:rotateX(65deg) rotateY(12deg); }
.mcp-plane-1 { transform:rotateX(-52deg) rotateY(58deg); }
.mcp-plane-2 { transform:rotateX(24deg) rotateY(-62deg); }
.mcp-orbit { position:absolute; inset:0; border:1px solid #76d4c72e; border-top-color:#96e6da87; border-radius:50%; transform-style:preserve-3d; animation:mcp-revolve 18s linear infinite; animation-play-state:paused; }
.mcp-plane-1 .mcp-orbit { border-color:#628fe538; border-right-color:#8bacf291; animation-duration:24s; animation-delay:-7s; }
.mcp-plane-2 .mcp-orbit { border-color:#8acee12d; border-bottom-color:#a0d8e58c; animation-duration:21s; animation-delay:-13s; }
.mcp-satellite { position:absolute; top:-7px; left:50%; width:14px; height:14px; margin-left:-7px; border:1px solid #a3e9dc; background:#174b52; box-shadow:0 0 15px #76d4c72d; transform:rotateZ(45deg); }
.mcp-satellite::after { content:""; position:absolute; inset:3px; background:#adebde; box-shadow:0 0 9px #a9efdb5e; }
.mcp-plane-1 .mcp-satellite { border-color:#a2bfff; background:#1c345e; }
.mcp-plane-1 .mcp-satellite::after { background:#afcaff; }
.mcp-signal-node { position:absolute; bottom:-2px; left:50%; width:4px; height:4px; border-radius:50%; background:#b1eee5; box-shadow:0 0 12px #76d4c766; }
.mcp-core { position:absolute; left:50%; top:50%; width:var(--mcp-core-size); height:var(--mcp-core-size); margin:calc(var(--mcp-core-size) * -.5); transform:rotateX(-12deg) rotateY(35deg); transform-style:preserve-3d; animation:mcp-core-turn 32s linear infinite; animation-play-state:paused; }
.mcp-core-face { position:absolute; inset:0; border:1px solid #9ce7db77; background:linear-gradient(135deg,#1f555a55,#152d4833); box-shadow:inset 0 0 20px #76d4c70a; transform:var(--side) translateZ(calc(var(--mcp-core-size) * .5)); }
.mcp-core-face::after { content:""; position:absolute; inset:9px; border:1px solid #76d4c729; }
.mcp-core-face-0 { --side:rotateY(0deg); }
.mcp-core-face-1 { --side:rotateY(90deg); }
.mcp-core-face-2 { --side:rotateY(180deg); }
.mcp-core-face-3 { --side:rotateY(270deg); }
.mcp-core-face-4 { --side:rotateX(90deg); }
.mcp-core-face-5 { --side:rotateX(-90deg); }
.mcp-core-label { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:clamp(14px,1.3vw,19px); font-weight:500; letter-spacing:.14em; color:#d9f6ef; text-shadow:0 0 14px #06131e,0 1px 4px #06131e; pointer-events:none; }
.agentic-section.is-in-view .mcp-orbit,.agentic-section.is-in-view .mcp-core { animation-play-state:running; }
@keyframes mcp-revolve { to { transform:rotateZ(360deg); } }
@keyframes mcp-core-turn { from { transform:rotateX(-12deg) rotateY(35deg); } to { transform:rotateX(-12deg) rotateY(395deg); } }
@media(max-width:900px) { .mcp-scene { --mcp-orbit-size:300px; --mcp-core-size:78px; height:350px; } .mcp-core-label { font-size:14px; } }
@media(max-width:620px) { .mcp-scene { --mcp-orbit-size:min(72vw,270px); --mcp-core-size:64px; height:300px; } .mcp-core-label { font-size:12px; } }