/* Blue refinement: professional exchange-like visual language. */
.professional-home {
  --pro-green: #3155e7;
  --pro-green-dark: #2345c7;
  --pro-blue: #3155e7;
  --blue-50: #f3f6ff;
  --blue-100: #e9efff;
  --blue-200: #d7e1ff;
  --blue-600: #3155e7;
  --blue-700: #2444c4;
  --navy-950: #081329;
}

/* Header */
.announcement-bar { background: #274bd5; }
.landing-page .site-header,
.public-page .site-header { border-color: #e1e6f0; background: rgb(255 255 255 / .96); }
.site-header .main-nav { gap: 2px; }
.site-header .nav-link,
.site-header .nav-trigger { padding-inline: 10px; color: #27324a; font-size: 13px; }
.site-header .nav-link:hover,
.site-header .nav-trigger:hover,
.site-header .nav-trigger[aria-expanded="true"] { background: #f0f4ff; color: #2549d1; }
.site-header .btn-primary { border-color: #3155e7; background: #3155e7; }
.site-header .btn-primary:hover { border-color: #2444c4; background: #2444c4; }

.mega-menu { width: min(1180px, calc(100vw - 40px)); border: 1px solid #d9e0ed; border-radius: 18px; padding: 18px; box-shadow: 0 28px 80px rgb(24 40 78 / .18); }
.mega-menu-head { min-height: 42px; margin-bottom: 10px; border-bottom: 1px solid #e0e6f0; color: #7a8599; font-size: 11px; letter-spacing: .09em; }
.mega-menu-head a { color: #3155e7; }
.mega-content { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 14px; }
.mega-content .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mega-item { min-height: 76px; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 11px; border: 1px solid transparent; }
.mega-item:hover { border-color: #dbe4ff; background: #f4f7ff; }
.mega-item .mini-icon { display: grid; place-items: center; width: 42px; height: 42px; border-color: #dce4f6; background: #f0f4ff; color: #3155e7; font-size: 20px; line-height: 1; }
.mega-item .mini-icon i, .mega-item .mini-icon i::before { display: block; color: inherit; font-size: inherit; line-height: 1; }
.mega-item strong { color: #182138; font-size: 14px; }
.mega-item span span { color: #6b768b; font-size: 12px; }
.mega-feature { min-height: 100%; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #dce4fb; border-radius: 14px; background: radial-gradient(circle at 90% 0, rgb(77 112 255 / .18), transparent 38%), #f3f6ff; padding: 22px; }
.mega-feature-icon { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: auto; border-radius: 12px; background: #3155e7; color: #fff; font-size: 1.15rem; }
.mega-feature p { margin: 20px 0 7px; color: #3155e7; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.mega-feature h3 { color: #121a2e; font-size: 1.15rem; line-height: 1.22; letter-spacing: -.03em; }
.mega-feature small { margin-top: 9px; color: #667187; font-size: .75rem; line-height: 1.5; }
.mega-feature > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: #2549cf; font-size: .75rem; font-weight: 800; }
.mega-network-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mega-network { min-height: 76px; border: 1px solid transparent; border-radius: 11px; padding: 11px; }
.mega-network:hover { border-color: #dbe4ff; background: #f4f7ff; }
.mega-network .network-logo { width: 42px; height: 42px; border-color: #dde5f5; background: #fff; }
.mega-feature-network h3 { font-size: 1.65rem; }
.mega-feature-network > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 18px; }
.mega-feature-network > div span { border: 1px solid #d5dff9; border-radius: 999px; background: #fff; padding: 5px 7px; color: #53617b; font-size: 10px; font-weight: 750; }
.mega-code-feature { background: #0c1732; border-color: #1d3264; }
.mega-code-feature p { margin-top: 0; color: #87a2ff; }
.mega-code-feature code { color: #dbe4ff; font: 600 .78rem/1.85 var(--font-mono); }
.mega-code-feature > a { margin-top: auto; color: #a9bbff; }
.mega-menu-foot { margin-top: 12px; border-radius: 11px; background: #f7f9fd; }

/* Header compatibility layer: these rules live in the legacy-loaded stylesheet
   so an older cached HTML shell cannot break a newer navigation module. */
.mega-network-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(92px, auto); align-content: start; gap: 7px; padding: 0; }
.mega-network { min-height: 92px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
.mega-network .network-logo img { width: 28px; height: 28px; filter: none !important; }
.mega-network-copy { min-width: 0; }
.mega-token-stack { display: flex; flex-direction: row-reverse; padding-left: 8px; }
.mega-token-stack img { width: 25px; height: 25px; margin-left: -7px; border: 2px solid #fff; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 2px 8px rgb(27 47 92 / .12); }
.mega-mini-flow { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 18px; border: 1px solid #dbe4fb; border-radius: 10px; background: rgb(255 255 255 / .7); padding: 9px; color: #4f5e7a; font-size: 9px; font-weight: 800; }
.mega-mini-flow i { color: #3155e7; }
.mega-code-feature code span { color: #7899ff; }
.mega-code-feature small { color: #8797bb; }

/* Hero */
.professional-hero .eyebrow { color: #2448cf; }
.professional-hero .eyebrow-icon { border-color: #d6e0ff; background: #edf2ff; color: #3155e7; }
.professional-hero .btn-accent { border-color: #3155e7; background: #3155e7; box-shadow: 0 14px 30px rgb(49 85 231 / .22); }
.professional-hero .btn-accent:hover { border-color: #2444c4; background: #2444c4; }
.hero-proof i { color: #3155e7; }
.core-console::before { background: linear-gradient(90deg, #3155e7, #79a1ff 70%, transparent); }
.core-icon { background: #edf2ff; color: #3155e7; }
.core-console-grid article > i { color: #3155e7; }
.live-pill { border-color: #d9e3ff; background: #f0f4ff; color: #294ac3; }
.live-pill i { background: #3155e7; box-shadow: 0 0 0 4px rgb(49 85 231 / .1); }
.core-console-foot { background: #0b1630; }

/* Contained, continuously moving carousel */
.asset-rail { border: 0; background: #fff; padding: 28px 0; }
.asset-rail .container { overflow: hidden; border: 1px solid #dce3ef; border-radius: 18px; background: #fbfcff; padding: 11px; box-shadow: 0 8px 24px rgb(28 48 89 / .045); }
.asset-carousel { width: 100%; overflow: hidden; border-radius: 12px; mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent); }
.asset-carousel-track { display: flex; width: max-content; animation: vexus-asset-loop 34s linear infinite !important; will-change: transform; }
.asset-carousel:hover .asset-carousel-track { animation-play-state: running; }
.asset-carousel-group { flex: 0 0 auto; gap: 9px; padding-right: 9px; }
.asset-chip { border-color: #dce3ef; border-radius: 11px; background: #fff; padding: 9px 13px 9px 9px; box-shadow: none; }
@keyframes vexus-asset-loop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Capability bento */
.capabilities-section { background: #f5f7fc !important; }
.professional-section-head .section-kicker,
.developer-section .section-kicker,
.security-section .section-kicker,
.cta-panel .section-kicker { color: #3155e7; }
.capability-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "wallet wallet wallet wallet wallet wallet wallet api api api api api" "send send send send swap swap swap swap conversion conversion conversion conversion"; gap: 14px; }
.capability-card { min-height: 270px; grid-column: auto; overflow: hidden; border-color: #dae2f0; border-radius: 18px; padding: 25px; box-shadow: 0 10px 30px rgb(22 42 83 / .045); }
.capability-card:hover { border-color: #bac9f5; box-shadow: 0 18px 40px rgb(28 58 133 / .08); transform: translateY(-2px); transition: .2s ease; }
.capability-wallets { grid-area: wallet; min-height: 390px; display: grid; grid-template-columns: minmax(210px, .78fr) minmax(330px, 1.22fr); grid-template-rows: auto 1fr; align-items: stretch; column-gap: 28px; background: linear-gradient(145deg, #fff 0%, #fff 55%, #eef3ff 100%); }
.capability-wallets .capability-card-head { grid-column: 1 / -1; }
.capability-wallets .capability-copy { align-self: center; }
.capability-api { grid-area: api; min-height: 350px; background: #0b1630; color: #fff; }
.capability-operation:nth-of-type(3) { grid-area: send; }
.capability-operation:nth-of-type(4) { grid-area: swap; }
.capability-operation:nth-of-type(5) { grid-area: conversion; }
.capability-card-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.capability-card .mini-icon { width: 44px; height: 44px; margin: 0; border-color: #d8e2ff; background: #edf2ff; color: #3155e7; }
.capability-index { position: static; color: #98a5bb; }
.capability-copy { margin-top: 27px; }
.capability-copy .card-eyebrow { margin: 0 0 8px; color: #3155e7; font-size: .62rem; font-weight: 850; letter-spacing: .12em; }
.capability-card h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.7rem); }
.capability-card p { margin-top: 9px; color: #69758a; }
.capability-api .mini-icon { border-color: #2d4275; background: #17284f; color: #88a5ff; }
.capability-api .capability-index { color: #64769f; }
.capability-api .card-eyebrow { color: #89a5ff; }
.capability-api h3 { color: #fff; }
.capability-api p { color: #aab6d0; }
.capability-api > a { color: #a8bbff; }
.wallet-proof { display: grid; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; color: #54627b; font-size: .69rem; font-weight: 700; }
.wallet-proof li { display: flex; align-items: center; gap: 7px; }
.wallet-proof i { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #edf2ff; color: #3155e7; font-size: .6rem; }
.wallet-visual { min-width: 0; align-self: stretch; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; margin-top: 24px; border: 1px solid #d8e2f5; border-radius: 16px; background: rgb(255 255 255 / .9); padding: 15px; box-shadow: 0 16px 38px rgb(40 70 142 / .09); }
.wallet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 4px; }
.wallet-network-pill, .wallet-live { display: inline-flex; align-items: center; gap: 7px; }
.wallet-network-pill img { width: 20px; height: 20px; }
.wallet-network-pill b { color: #1e2b46; font-size: .68rem; }
.wallet-live { color: #557091; font-size: .58rem; font-weight: 800; }
.wallet-live i { width: 6px; height: 6px; border-radius: 50%; background: #3155e7; box-shadow: 0 0 0 4px rgb(49 85 231 / .1); }
.wallet-address { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e1e7f2; border-radius: 11px; background: #f8faff; padding: 11px 13px; }
.wallet-address span { min-width: 0; display: grid; gap: 3px; }
.wallet-address small { color: #8290a6; font-size: .56rem; }
.wallet-address strong { overflow: hidden; color: #27344e; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.wallet-address > i { color: #6e84ae; }
.wallet-assets { display: grid; gap: 7px; }
.wallet-asset { min-height: 55px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; border: 1px solid #e3e8f2; border-radius: 11px; padding: 9px 11px; }
.wallet-asset > span { display: grid; gap: 2px; }
.wallet-asset strong { color: #202c45; font-size: .7rem; }
.wallet-asset small { color: #8793a7; font-size: .56rem; }
.wallet-asset em { color: #4f6388; font-size: .56rem; font-style: normal; font-weight: 750; }
.asset-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: .8rem; font-style: normal; font-weight: 800; }
.eth-mark { background: #627eea; }
.usdc-mark { background: #2775ca; }
.wallet-confirmation { min-height: 53px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; border-radius: 11px; background: #0d1a36; padding: 10px 12px; }
.wallet-confirmation > i { color: #7f9fff; font-size: 1.05rem; }
.wallet-confirmation span { display: grid; gap: 2px; }
.wallet-confirmation strong { color: #ecf2ff; font-size: .62rem; }
.wallet-confirmation small { color: #8291ae; font-size: .52rem; }
.wallet-confirmation > b { border: 1px solid #2c4271; border-radius: 999px; padding: 5px 7px; color: #9db2f4; font-size: .5rem; text-transform: uppercase; }
.endpoint-list { display: grid; gap: 7px; margin-top: auto; padding-top: 22px; }
.endpoint-list span { display: grid; grid-template-columns: 48px 1fr; gap: 8px; border: 1px solid #213762; border-radius: 8px; background: #101e3b; padding: 8px 10px; color: #b8c6e2; font: 500 .65rem/1.2 var(--font-mono); }
.endpoint-list b { color: #7597ff; font-size: .58rem; }
.card-status { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: #647187; font-size: .68rem; font-weight: 700; }
.card-status i { width: 7px; height: 7px; border-radius: 50%; background: #3155e7; box-shadow: 0 0 0 4px rgb(49 85 231 / .09); }
.swap-pair-visual, .conversion-visual { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; }
.swap-pair-visual span, .conversion-visual span { border: 1px solid #d9e2f2; border-radius: 999px; background: #f7f9ff; padding: 7px 11px; color: #263552; font-size: .67rem; font-weight: 850; }
.swap-pair-visual i, .conversion-visual i { color: #3155e7; }

/* Professional architecture panel */
.architecture-section { background: #09152e !important; }
.architecture-layout { grid-template-columns: minmax(0, .72fr) minmax(620px, 1.28fr); gap: clamp(44px, 6vw, 90px); }
.architecture-section .section-kicker { color: #7e9eff; }
.feature-list li > i { color: #7496ff; }
.orchestration-panel { min-width: 0; overflow: hidden; border: 1px solid #253964; border-radius: 20px; background: radial-gradient(circle at 50% 30%, rgb(57 93 207 / .17), transparent 38%), #0d1a36; box-shadow: 0 30px 80px rgb(0 5 19 / .28); }
.orchestration-head { min-height: 54px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 15px; border-bottom: 1px solid #22345b; padding: 0 18px; }
.orchestration-head > span { display: flex; gap: 5px; }
.orchestration-head > span i { width: 7px; height: 7px; border-radius: 50%; background: #35486f; }
.orchestration-head > span i:first-child { background: #5e82f7; }
.orchestration-head strong { color: #eaf0ff; font-size: .72rem; }
.orchestration-head small { color: #7182a6; font-size: .62rem; }
.architecture-pipeline { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.12fr); align-items: stretch; gap: 28px; padding: 28px 22px 22px; }
.arch-node, .arch-network-cluster { position: relative; min-width: 0; min-height: 190px; border: 1px solid #293d68; border-radius: 15px; background: #111f3e; padding: 16px; }
.arch-node { display: flex; flex-direction: column; align-items: flex-start; }
.arch-node::after { content: '\2192'; position: absolute; top: 50%; right: -22px; translate: 50% -50%; color: #6d8ff7; font-size: 1.1rem; }
.arch-icon, .arch-core > img { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: auto; border-radius: 11px; background: #1c3262; color: #8ba7ff; }
.arch-node small, .cluster-heading small { margin-top: 13px; color: #7186b1; font-size: .52rem; font-weight: 850; letter-spacing: .09em; }
.arch-node strong, .cluster-heading strong { margin-top: 4px; color: #f1f5ff; font-size: .76rem; line-height: 1.25; }
.arch-node p { margin: 5px 0 0; color: #8998b7; font-size: .56rem; line-height: 1.4; }
.arch-node-tag { margin-top: 11px; border: 1px solid #2d4475; border-radius: 999px; padding: 4px 7px; color: #9db2eb; font-size: .49rem; font-weight: 800; }
.arch-core { border-color: #456cdd; background: linear-gradient(145deg, #152a59, #101d3a); box-shadow: 0 0 0 4px rgb(66 105 219 / .08); }
.arch-core > img { background: #0d2252; object-fit: cover; }
.core-modules { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.core-modules span { border: 1px solid #304b83; border-radius: 5px; background: #162a53; padding: 4px 5px; color: #a8baf0; font-size: .46rem; font-weight: 750; }
.arch-network-cluster { background: #0f1c37; }
.cluster-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.cluster-heading > span { display: grid; }
.cluster-heading small { margin-top: 0; }
.cluster-heading b { border: 1px solid #2e4473; border-radius: 999px; padding: 4px 6px; color: #8fa6df; font-size: .48rem; white-space: nowrap; }
.flow-networks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.flow-networks span { min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 7px; border: 1px solid #263a63; border-radius: 9px; background: #142342; padding: 7px; }
.flow-networks img { width: 20px; height: 20px; }
.flow-networks b { overflow: hidden; color: #becae2; font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-protocols { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #22345b; background: #0a1730; }
.pipeline-protocols > span { min-width: 0; min-height: 72px; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: auto auto; align-content: center; gap: 1px 7px; border-right: 1px solid #22345b; padding: 11px 12px; }
.pipeline-protocols > span:last-child { border-right: 0; }
.pipeline-protocols i { grid-row: 1 / 3; align-self: center; color: #7596ff; font-size: .9rem; }
.pipeline-protocols b { overflow: hidden; color: #d9e2f5; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-protocols small { overflow: hidden; color: #6e7f9f; font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }

/* Remaining sections */
.developer-tags span { border-color: #d9e1f1; color: #576784; }
.api-card { border-color: #172a55; background: #09152d; box-shadow: 0 26px 70px rgb(18 42 91 / .2); }
.api-card pre { color: #a9bcff; }
.api-card-head i:first-child { background: #5f82f5; }
.security-grid-public article > i { color: #3155e7; }
.cta-panel { background: radial-gradient(circle at 85% 20%, rgb(83 119 255 / .28), transparent 30%), #0a1631; }
.cta-panel .btn-accent { border-color: #5578f5; background: #5578f5; color: #fff; }
.cta-panel .btn-accent:hover { border-color: #6b8cff; background: #6b8cff; }

@media (max-width: 1120px) {
  .site-header .nav-link, .site-header .nav-trigger { padding-inline: 7px; font-size: 12px; }
  .mega-content { grid-template-columns: minmax(0, 1fr) 250px; }
  .capability-grid { grid-template-areas: "wallet wallet wallet wallet wallet wallet api api api api api api" "send send send send swap swap swap swap conversion conversion conversion conversion"; }
  .capability-wallets { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .capability-wallets .capability-card-head { grid-column: auto; }
  .capability-wallets .capability-copy { align-self: auto; }
  .architecture-layout { grid-template-columns: 1fr; }
  .orchestration-panel { width: min(100%, 760px); }
}

@media (max-width: 820px) {
  .mega-content { grid-template-columns: 1fr; }
  .mega-feature { display: none; }
  .capability-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "wallet wallet" "api api" "send swap" "conversion conversion"; }
  .capability-wallets, .capability-api { min-height: 330px; }
  .architecture-pipeline { grid-template-columns: 1fr; gap: 30px; }
  .arch-node, .arch-network-cluster { min-height: 165px; }
  .arch-node::after { top: auto; right: 50%; bottom: -24px; translate: 50% 50%; rotate: 90deg; }
  .pipeline-protocols { grid-template-columns: 1fr 1fr; }
  .pipeline-protocols > span:nth-child(2) { border-right: 0; }
  .pipeline-protocols > span:nth-child(-n + 2) { border-bottom: 1px solid #22345b; }
}

@media (max-width: 620px) {
  .mega-token-stack { display: none; }
  .asset-rail { padding: 16px 0; }
  .asset-rail .container { width: min(100% - 24px, 1240px); border-radius: 14px; padding: 8px; }
  .asset-carousel-track { animation-duration: 26s !important; }
  .capability-grid { grid-template-columns: 1fr; grid-template-areas: "wallet" "api" "send" "swap" "conversion"; }
  .capability-wallets, .capability-api, .capability-card { min-height: 275px; }
  .wallet-visual { margin-top: 18px; padding: 12px; }
  .wallet-asset em { display: none; }
  .wallet-confirmation { grid-template-columns: 26px 1fr; }
  .wallet-confirmation > b { display: none; }
  .orchestration-head { grid-template-columns: 1fr auto; }
  .orchestration-head > small { display: none; }
  .architecture-pipeline { padding: 20px 14px; }
  .pipeline-protocols { grid-template-columns: 1fr; }
  .pipeline-protocols > span { border-right: 0; border-bottom: 1px solid #22345b; }
  .pipeline-protocols > span:last-child { border-bottom: 0; }
}