:root { --agent-ink: #111714; --agent-muted: #66706a; --agent-line: #d9dfdb; --agent-green: #176b4d; --agent-paper: #f5f7f5; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--agent-paper); color: var(--agent-ink); font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; }
a { color: inherit; }
.agent-connect-main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0 80px; }
.agent-connect-hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 70px; align-items: center; min-height: 430px; }
.agent-eyebrow { margin: 0 0 18px; color: var(--agent-green); font: 800 10px/1.2 ui-monospace, monospace; }
.agent-connect-hero h1 { margin: 0; max-width: 700px; font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: 0; }
.agent-connect-hero p:not(.agent-eyebrow) { max-width: 640px; margin: 24px 0 0; color: var(--agent-muted); font-size: 15px; line-height: 1.75; }
.agent-contract { position: relative; min-height: 320px; border: 1px solid #bcc6c0; background: #101713; color: #e8f1eb; overflow: hidden; }
.agent-contract::before { content: ""; position: absolute; inset: 26px; border: 1px solid #33443a; }
.agent-contract-core { position: absolute; inset: 50% auto auto 50%; width: 110px; height: 110px; display: grid; place-items: center; transform: translate(-50%, -50%); border: 1px solid #7cf0b2; color: #7cf0b2; font: 800 19px/1 ui-monospace, monospace; }
.agent-contract span { position: absolute; padding: 6px 8px; background: #101713; color: #a9b9af; font: 700 9px/1 ui-monospace, monospace; }
.agent-contract span:nth-child(2) { top: 34px; left: 34px; }
.agent-contract span:nth-child(3) { top: 34px; right: 34px; }
.agent-contract span:nth-child(4) { bottom: 34px; left: 34px; }
.agent-contract span:nth-child(5) { right: 34px; bottom: 34px; }
.agent-contract i { position: absolute; top: 50%; left: 50%; width: 250px; height: 1px; background: #476052; transform: translate(-50%, -50%) rotate(34deg); }
.agent-contract i:last-child { transform: translate(-50%, -50%) rotate(-34deg); }
.agent-links { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border: 1px solid var(--agent-line); background: #fff; }
.agent-links a { min-height: 126px; padding: 20px; border-right: 1px solid var(--agent-line); text-decoration: none; }
.agent-links a:last-child { border-right: 0; }
.agent-links span, .access-row span { display: block; color: var(--agent-muted); font: 700 9px/1.2 ui-monospace, monospace; }
.agent-links strong { display: block; margin-top: 30px; font-size: 16px; }
.agent-links small { display: block; margin-top: 7px; color: var(--agent-muted); font-size: 11px; }
.access-section { margin-top: 70px; }
.access-section h2 { margin: 0 0 22px; font-size: 28px; }
.access-grid { border-top: 1px solid var(--agent-line); }
.access-row { display: grid; grid-template-columns: 140px 1fr 160px; gap: 20px; align-items: center; min-height: 76px; border-bottom: 1px solid var(--agent-line); }
.access-row strong { font-size: 13px; }
.access-row p { margin: 0; color: var(--agent-muted); font-size: 12px; line-height: 1.5; }
.access-row b { justify-self: end; color: var(--agent-green); font: 800 9px/1 ui-monospace, monospace; }
@media (max-width: 760px) { .agent-connect-main { padding-top: 48px; } .agent-connect-hero { grid-template-columns: 1fr; gap: 34px; } .agent-contract { min-height: 280px; } .agent-links { grid-template-columns: 1fr; } .agent-links a { border-right: 0; border-bottom: 1px solid var(--agent-line); } .agent-links a:last-child { border-bottom: 0; } .access-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; } .access-row b { justify-self: start; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }