.bond-hub-site { background: #0f0f13; }
.bond-hub-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 7vw, 90px); align-items: center; min-height: 650px; padding: clamp(40px, 8vw, 100px) 0; }
.bond-hub-copy > p,
.bond-hub-section-title > p,
.bond-map-preview > div:first-child > p { margin: 0; color: var(--yellow); font-size: 10px; font-weight: 950; letter-spacing: 0.14em; }
.bond-hub-copy h1 { margin: 19px 0 0; font-size: clamp(50px, 7vw, 82px); line-height: 0.94; letter-spacing: -0.065em; }
.bond-hub-copy h1 span { display: block; }
.bond-hub-copy h1 span:first-child { white-space: nowrap; }
.bond-hub-lead { max-width: 680px; margin-top: 25px; color: var(--muted); font-size: clamp(15px, 2vw, 19px); line-height: 1.75; }
.bond-hub-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 32px; }
.bond-hub-actions a { padding: 13px 18px; color: #0b0b0d; border-radius: 8px; background: var(--yellow); font-size: 12px; font-weight: 950; text-decoration: none; }
.bond-hub-actions a + a { color: var(--paper); border: 1px solid var(--line); background: transparent; }
.bond-passport { position: relative; min-height: 470px; padding: 28px; overflow: hidden; color: #0b0b0d; border: 4px solid #0b0b0d; border-radius: 22px; background: linear-gradient(145deg, #f3ff57, #fff7e8 58%, #ff9ed0); box-shadow: 18px 18px 0 #6bf6ff; transform: rotate(2deg); }
.bond-passport::after { position: absolute; right: -24px; bottom: -44px; content: "∞"; color: rgba(11, 11, 13, 0.09); font-size: 240px; font-weight: 950; line-height: 1; }
.bond-passport > div:first-child { display: flex; justify-content: space-between; padding-bottom: 13px; border-bottom: 2px solid rgba(11, 11, 13, 0.3); font-size: 9px; font-weight: 950; letter-spacing: 0.12em; }
.bond-passport > p { margin: 42px 0 7px; font-size: 12px; font-weight: 850; }
.bond-passport h2 { margin: 0; font-size: clamp(47px, 6vw, 72px); line-height: 0.9; letter-spacing: -0.065em; }
.bond-passport-tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.bond-passport-tags span { padding: 6px 9px; border: 2px solid #0b0b0d; border-radius: 999px; background: rgba(255, 255, 255, 0.48); font-size: 9px; font-weight: 950; }
.bond-passport > strong { position: absolute; bottom: 27px; left: 28px; z-index: 2; max-width: 220px; font-size: 11px; }
.bond-passport-orbits { position: absolute !important; right: 20px; bottom: 30px; width: 150px; height: 150px; border: 3px solid #0b0b0d; border-radius: 50%; }
.bond-passport-orbits i { position: absolute; width: 54px; height: 54px; border: 3px solid #0b0b0d; border-radius: 50%; background: #6bf6ff; }
.bond-passport-orbits i:nth-child(1) { top: -8px; left: 47px; }
.bond-passport-orbits i:nth-child(2) { right: 0; bottom: 14px; background: #ff4f72; }
.bond-passport-orbits i:nth-child(3) { bottom: 14px; left: 0; background: #9b8cff; }
.bond-route-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.bond-route-grid a { min-height: 190px; padding: 20px; color: var(--paper); background: #141419; text-decoration: none; transition: background 160ms ease, color 160ms ease; }
.bond-route-grid a:hover { color: #0b0b0d; background: var(--yellow); }
.bond-route-grid span { display: block; font-size: 10px; font-weight: 950; }
.bond-route-grid strong { display: block; margin-top: 50px; font-size: 20px; }
.bond-route-grid p { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.bond-route-grid a:hover p { color: rgba(11, 11, 13, 0.64); }
.bond-how,
.bond-map-preview,
.bond-choose { padding: clamp(70px, 10vw, 130px) 0 0; }
.bond-hub-section-title { display: grid; grid-template-columns: 0.42fr 1.58fr; gap: 20px; align-items: end; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.bond-hub-section-title h2 { max-width: 900px; margin: 0; font-size: clamp(34px, 6vw, 64px); line-height: 0.98; letter-spacing: -0.055em; }
.bond-how ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.bond-how li { min-height: 220px; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, 0.04); }
.bond-how li > span { color: var(--yellow); font-size: 13px; font-weight: 950; }
.bond-how li div { margin-top: 76px; }
.bond-how li strong { font-size: 17px; }
.bond-how li p { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.bond-login-note { margin: 14px 0 0; padding: 15px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; font-size: 10px; line-height: 1.7; }
.bond-map-preview { display: grid; grid-template-columns: 1fr 0.9fr; gap: 40px; align-items: center; }
.bond-map-preview h2 { margin: 16px 0 0; font-size: clamp(38px, 6vw, 68px); line-height: 0.95; letter-spacing: -0.055em; }
.bond-map-preview ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 25px 0 0; padding: 0; list-style: none; }
.bond-map-preview li { padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.bond-map-preview li span { display: block; color: var(--yellow); font-size: 10px; font-weight: 950; }
.bond-map-preview li strong { display: block; margin-top: 7px; font-size: 10px; line-height: 1.5; }
.bond-map-art { position: relative; width: min(100%, 470px); aspect-ratio: 1; margin: auto; border: 1px solid var(--line); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 52px, rgba(255,255,255,.12) 53px 54px), conic-gradient(from 30deg, rgba(243,255,87,.09), transparent, rgba(107,246,255,.12), transparent, rgba(255,79,114,.1)); }
.bond-map-art::before,
.bond-map-art::after { position: absolute; inset: 50% 8%; height: 1px; content: ""; background: var(--line); transform: rotate(30deg); }
.bond-map-art::after { transform: rotate(-30deg); }
.bond-map-art > span { position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; margin: -7px; border: 3px solid #0b0b0d; border-radius: 50%; background: var(--yellow); transform: rotate(calc(var(--i, 0) * 60deg)) translateY(-170px); }
.bond-map-art > span:nth-child(1) { --i: 0; }.bond-map-art > span:nth-child(2) { --i: 1; }.bond-map-art > span:nth-child(3) { --i: 2; }.bond-map-art > span:nth-child(4) { --i: 3; }.bond-map-art > span:nth-child(5) { --i: 4; }.bond-map-art > span:nth-child(6) { --i: 5; }
.bond-map-art i { position: absolute; inset: 25%; clip-path: polygon(50% 0, 94% 25%, 84% 72%, 50% 100%, 9% 75%, 14% 29%); background: color-mix(in srgb, var(--yellow) 38%, transparent); border: 2px solid var(--yellow); }
.bond-filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.bond-filter-row button { padding: 9px 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: transparent; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.bond-filter-row button.is-active { color: #0b0b0d; border-color: var(--yellow); background: var(--yellow); }
.bond-test-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; padding-bottom: 100px; }
.bond-test-card { position: relative; display: block; min-height: 300px; padding: 22px; overflow: hidden; color: inherit; border: 1px solid color-mix(in srgb, var(--card-accent) 48%, var(--line)); border-radius: 13px; background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--card-accent) 22%, transparent), transparent 34%), rgba(255,255,255,.04); text-decoration: none; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.bond-test-card:hover { transform: translateY(-4px); border-color: var(--card-accent); box-shadow: 0 20px 46px color-mix(in srgb, var(--card-accent) 14%, transparent); }
.bond-test-card:focus-visible { outline: 3px solid var(--card-accent); outline-offset: 4px; }
.bond-test-card:active { transform: translateY(-1px) scale(.995); }
.bond-test-card::after { position: absolute; right: -18px; bottom: -50px; content: "∞"; color: color-mix(in srgb, var(--card-accent) 14%, transparent); font-size: 190px; font-weight: 950; }
.bond-test-meta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; }
.bond-test-meta span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 8px; }
.bond-test-card > p { position: relative; z-index: 2; margin: 54px 0 0; color: var(--card-accent); font-size: 9px; font-weight: 950; letter-spacing: .11em; }
.bond-test-card h3 { position: relative; z-index: 2; max-width: 80%; margin: 8px 0 0; font-size: clamp(26px, 4vw, 40px); line-height: .98; letter-spacing: -.045em; }
.bond-test-card > div:not(.bond-test-meta) { position: relative; z-index: 2; margin-top: 8px; color: var(--muted); font-size: 10px; }
.bond-test-card small { position: relative; z-index: 2; display: block; max-width: 75%; margin-top: 20px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.bond-card-cta { position: absolute; bottom: 18px; left: 22px; z-index: 3; display: inline-flex; min-height: 44px; align-items: center; gap: 9px; padding: 0 15px; color: #0b0b0d; border-radius: 8px; background: var(--card-accent); font-size: 12px; font-weight: 950; }
@media (max-width: 760px) {
  .bond-hub-hero,
  .bond-map-preview { grid-template-columns: 1fr; }
  .bond-hub-hero { min-height: 0; }
  .bond-hub-copy h1 span:first-child { white-space: normal; }
  .bond-passport { min-height: 430px; margin: 5px 8px 18px 0; box-shadow: 10px 10px 0 #6bf6ff; }
  .bond-route-grid,
  .bond-how ol,
  .bond-test-grid { grid-template-columns: 1fr; }
  .bond-hub-section-title { display: block; }
  .bond-hub-section-title h2 { margin-top: 12px; }
  .bond-map-preview ul { grid-template-columns: 1fr; }
  .bond-map-art > span { transform: rotate(calc(var(--i, 0) * 60deg)) translateY(-122px); }
}