/* AVILITIES / Specialties Edition — static-first development portfolio. */
:root{color-scheme:dark;--page-bg:#070a12;--surface:#0c111c;--surface-raised:#101724;--line:#232b3b;--line-soft:#1a2231;--ink:#f2f5fb;--muted:#a2aec0;--quiet:#7d8ba1;--sky:#38bdf8;--amber:#f59e0b;--amber-light:#f7c56c;--font-ui:Inter,"Segoe UI",Arial,sans-serif;--font-mono:"Cascadia Code",Consolas,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--page-bg);color:var(--ink);font-family:var(--font-ui);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}body:has(dialog[open]){overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--sky);outline-offset:5px}button:disabled{cursor:default}img,svg{display:block}button{color:inherit}p,h1,h2,h3,h4{margin:0}ul{margin:0;padding:0;list-style:none}code{font-family:var(--font-mono);font-size:.91em;color:#c4d4e9}::selection{background:#38bdf844;color:#fff}[hidden]{display:none!important}.container{width:min(1320px,calc(100% - 96px));margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:16px;top:-100px;z-index:100;padding:10px 20px;border-radius:4px;background:var(--sky);color:var(--page-bg);font-weight:700}.skip-link:focus{top:16px}
.development-banner{border-bottom:1px solid #62451d;background:#241b0e;color:var(--amber-light);font-size:10px;letter-spacing:.025em}.banner-inner{display:flex;align-items:center;justify-content:center;gap:11px;min-height:38px;padding-block:8px}.banner-inner p{line-height:1.5}.banner-inner strong{font-size:9px;letter-spacing:.08em;font-weight:750}.banner-divider{padding:0 10px;color:#83612d}.pulse-dot,.amber-dot{display:inline-block;flex-shrink:0;width:5px;height:5px;border-radius:50%;background:var(--amber)}.pulse-dot{width:6px;height:6px;box-shadow:0 0 0 4px #f59e0b13;animation:pulse 2.5s ease-in-out infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 3px #f59e0b16}50%{box-shadow:0 0 0 6px #f59e0b07}}.site-header{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:26px;border-bottom:1px solid var(--line-soft)}.brand-link{flex-shrink:0}.brand-link img{width:222px;height:56px;object-fit:contain;object-position:left center}.ecosystem-nav{display:flex;align-items:center;gap:34px}.ecosystem-nav a{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:14px;font-size:12px;line-height:1.8;font-weight:600}.ecosystem-nav a>span:not(.link-arrow):not(.current-dot){grid-column:1;grid-row:2;font-size:10px;letter-spacing:.03em;color:var(--quiet);font-weight:400}.ecosystem-nav a .link-arrow,.current-dot{grid-column:2;grid-row:1;color:var(--quiet)}.ecosystem-nav a:hover{color:var(--sky)}.ecosystem-nav a.current-site{color:var(--sky)}.current-dot{width:5px;height:5px;margin-top:9px;border-radius:50%;background:var(--sky)}
.hero{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:48px;padding-top:76px;padding-bottom:68px}.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:9px;font-weight:650;letter-spacing:.105em;color:#bcc8dc;margin-bottom:24px}.small-cross{font-size:19px;line-height:1;color:var(--sky);font-weight:400}.eyebrow-status{color:var(--amber-light);margin-left:2px;padding-left:10px;border-left:1px solid #65502f;font-size:8px;letter-spacing:.08em}h1{font-size:clamp(40px,4.4vw,65px);font-weight:600;line-height:1.065;letter-spacing:-.055em}h1>span{color:var(--sky)}.hero-description{max-width:510px;margin-top:26px;font-size:15px;line-height:1.85;color:var(--muted)}.hero-description a{color:#d7e8f8;border-bottom:1px solid #466a85}.hero-description a:hover{color:var(--sky)}.hero-disclosure{max-width:500px;color:var(--quiet);font-size:12px;line-height:1.8;margin-top:15px}.hero-disclosure strong{font-weight:500;color:#c3c9d2}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;border:1px solid transparent;border-radius:5px;padding:12px 18px;font-size:12px;font-weight:650}.primary-button{color:#04141e;background:var(--sky);box-shadow:0 0 24px #38bdf80a}.primary-button:hover{background:#74d4ff;box-shadow:0 0 24px #38bdf825}.primary-button>span[aria-hidden]{font-size:17px;line-height:1}.text-link{display:flex;gap:14px;align-items:center;font-size:11px;font-weight:600;color:#d4dce9}.text-link:hover{color:var(--sky)}.hero-footnote{display:flex;align-items:center;gap:9px;margin-top:27px;color:var(--quiet);font-size:10px}.hero-footnote .pulse-dot{width:4px;height:4px}
.system-visual{position:relative;isolation:isolate;aspect-ratio:520/490;width:100%;max-width:540px;justify-self:end;background:radial-gradient(ellipse at 50% 43%,#18345955 0%,#101b2a20 40%,transparent 70%);overflow:hidden}.visual-topline,.visual-bottomline{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--quiet);font-family:var(--font-mono);font-size:8px;letter-spacing:.06em}.visual-topline{top:0;border-top:1px solid var(--line);padding-top:15px}.visual-topline>span:first-child,.visual-bottomline>span:first-child{display:flex;gap:8px;align-items:center}.tiny-square{display:block;width:5px;height:5px;background:var(--sky)}.visual-bottomline{bottom:0;border-bottom:1px solid var(--line);padding-bottom:15px;font-size:7px}.visual-bottomline .amber-dot{width:4px;height:4px}.orbital-grid{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#4d6b832b .75px,transparent .75px);background-size:19px 19px;mask-image:radial-gradient(ellipse at 50% 50%,#000 25%,transparent 73%)}.orbit{position:absolute;left:50%;top:44.5%;transform:translate(-50%,-50%);border:1px solid #36516d30;border-radius:50%}.orbit-one{width:52%;aspect-ratio:1}.orbit-two{width:75%;aspect-ratio:1}.orbit-three{width:98%;aspect-ratio:1}.orbit-label{position:absolute;top:60%;left:50%;transform:translateX(-50%);color:#50637b;letter-spacing:.14em;font-size:6px;white-space:nowrap}.connection-lines{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.core-node{position:absolute;top:12%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:12px 15px;min-width:194px;border:1px solid #2d3b50;border-radius:7px;background:#0e1623;box-shadow:0 8px 32px #0004}.core-node .core-symbol{font-size:20px;font-weight:600;color:#a5dff9;border-right:1px solid #324357;padding-right:12px}.core-node strong{font-size:13px;letter-spacing:.14em;line-height:1}.core-node small{display:block;font-size:6px;letter-spacing:.13em;margin-top:3px;color:var(--quiet)}.core-node>span:last-child{margin-left:auto;color:#7894ad;font-size:12px}.hub-node{position:absolute;left:50%;top:35%;width:56%;min-height:90px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:13px;border:1px solid #38bdf861;border-radius:10px;background:linear-gradient(125deg,#112333,#0c1628);box-shadow:0 0 0 5px #38bdf807,0 10px 60px #38bdf81a}.hub-node img{width:47px;height:47px;object-fit:contain}.hub-node strong{display:block;font-size:23px;letter-spacing:.05em;font-weight:650;line-height:1.3}.hub-node div>span{display:block;color:#8eb5d1;font-size:7px;letter-spacing:.2em}.hub-indicator{position:absolute;top:12px;right:12px;width:4px;height:4px;border-radius:50%;background:var(--sky);box-shadow:0 0 8px #38bdf888}.specialty-nodes{position:absolute;left:3%;right:3%;top:71%;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.mini-node{position:relative;display:flex;flex-direction:column;align-items:center;background:linear-gradient(#121b2b,#0c121f);border:1px solid #2c3850;border-radius:7px;padding:15px 6px 11px;box-shadow:0 10px 26px #0003}.mini-node:hover{border-color:#586d8f;transform:translateY(-2px)}.mini-node img{width:30px;height:30px;object-fit:contain;margin-bottom:9px}.mini-node strong{font-size:10px;font-weight:600;letter-spacing:.015em}.mini-node>span{font-size:6px;letter-spacing:.12em;color:var(--quiet);margin-top:2px}.mini-node i{position:absolute;right:8px;top:8px;width:3px;height:3px;border-radius:50%;background:var(--amber)}
.architecture-strip{display:grid;grid-template-columns:1.1fr 30px 1.05fr 30px .85fr;align-items:center;gap:23px;padding:25px 28px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(110deg,#0e1624,#0a101b)}.section-kicker{font-size:9px;line-height:1.5;letter-spacing:.14em;color:var(--quiet);font-weight:600}.architecture-strip .section-kicker{display:block;font-size:7px;letter-spacing:.13em;margin-bottom:9px}.architecture-core>a,.architecture-hub>a{font-size:13px;font-weight:650}.architecture-core>a>span,.architecture-hub>a>span{display:inline-block;font-size:9px;font-weight:400;color:var(--quiet);margin-left:7px}.architecture-hub>a{color:var(--sky)}.architecture-strip p{margin-top:5px;font-size:9px;color:var(--quiet)}.architecture-strip p>b{color:#4a5e75;padding-inline:3px;font-weight:400}.architecture-arrow{color:#52738f;font-size:20px;text-align:center}.architecture-destinations{display:grid;gap:5px;font-size:10px;color:#b6c5da;border-left:1px solid var(--line);padding-left:22px}.architecture-destinations>a{display:flex;justify-content:space-between;gap:12px}.architecture-destinations>a>span{color:#5c7892}.architecture-strip a:hover{color:var(--sky)}
.specialties-section{padding-top:86px;padding-bottom:64px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:34px}.section-heading .section-kicker{display:flex;align-items:center;gap:7px;margin-bottom:18px}.section-heading h2,.closing-section h2{font-size:39px;line-height:1.15;font-weight:550;letter-spacing:-.04em}.section-heading h2>span{color:#8696ac}.section-heading>p{max-width:360px;color:var(--muted);font-size:12px;line-height:1.85;padding-bottom:3px}.filter-row{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);margin-bottom:27px;padding-bottom:16px}.filter-group{display:flex;flex-wrap:wrap;gap:6px}.filter-button{display:flex;align-items:center;gap:6px;background:transparent;color:var(--quiet);border:1px solid transparent;border-radius:5px;padding:8px 12px;font-size:10px;font-weight:500}.filter-button span{opacity:.7}.filter-button:hover{color:#e2edfa;border-color:#34465e}.filter-button.active{color:#e1f4ff;background:#163249;border-color:#2a536e}.filter-count{font-family:var(--font-mono);font-size:8px;color:var(--quiet);white-space:nowrap}.specialty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}.specialty-card{--specialty-accent:#818cf8;position:relative;display:flex;flex-direction:column;min-width:0;padding:24px 24px 0;background:linear-gradient(145deg,#111827 0%,#0d1420 40%,#0b111c 100%);border:1px solid #283247;border-top:2px solid #5356aa;border-radius:9px;overflow:hidden;transition:border-color .2s,box-shadow .2s}.specialty-card:hover{border-color:#485775;box-shadow:0 12px 35px #0002}.specialty-card.readyops-card{--specialty-accent:#f28375;border-top-color:#9e3d35}.specialty-card.pass-card{--specialty-accent:#68bcc6;border-top-color:#2b6c84}.card-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:8px;line-height:1.6;color:var(--quiet);letter-spacing:.055em}.domain-label{text-align:right;font-size:6px;letter-spacing:.08em;color:#8e9cb1}.card-identity{display:flex;align-items:center;gap:15px;margin-top:28px}.specialty-icon{display:grid;place-items:center;width:65px;height:65px;border:1px solid #354059;border-radius:13px;background:#0b111d;flex-shrink:0;box-shadow:0 5px 16px #0002}.specialty-icon img{width:52px;height:52px;object-fit:contain}.card-identity h3{font-size:26px;line-height:1.15;font-weight:650;letter-spacing:-.04em}.card-identity p{margin-top:5px;color:#9ba9be;font-size:10px;line-height:1.55}.subdomain{display:flex;width:fit-content;align-items:center;gap:12px;color:var(--specialty-accent);font-family:var(--font-mono);font-size:9px;margin-top:18px}.subdomain:hover{color:#e2edff}.card-summary{margin-top:16px;color:#a1aec1;font-size:11px;line-height:1.85;min-height:62px}.development-pill{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:20px;border:1px solid #6b4b205c;border-radius:4px;background:#3b2b1247;padding:8px 5px;color:var(--amber-light);font-size:7px;line-height:1.6;font-weight:650;letter-spacing:.025em}.development-pill>.amber-dot{width:4px;height:4px}.progress-block{margin-top:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}.progress-label{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:10px;color:#c2cee0}.progress-label strong{color:var(--specialty-accent);font-size:22px;letter-spacing:-.03em;font-weight:550}.progress-label strong>span{font-size:12px;font-weight:400;padding-left:2px}.progress-track{margin-top:8px;height:4px;background:#263043;border-radius:2px;overflow:hidden}.progress-track>span{display:block;height:100%;border-radius:2px;background:var(--specialty-accent)}.progress-block>p{margin-top:8px;font-family:var(--font-mono);font-size:6px;color:var(--quiet);line-height:1.7}.progress-block>p>code{color:#a1b0c5}.card-list-section{margin-top:21px}.card-list-section h4{display:flex;flex-wrap:wrap;align-items:center;column-gap:5px;font-size:10px;line-height:1.5;font-weight:600}.card-list-section h4>span:last-child{font-size:8px;font-weight:400;color:var(--quiet)}.list-marker{display:inline-grid;place-items:center;width:13px;height:13px;margin-right:2px;border-radius:50%;font-size:8px}.complete-marker{background:#123f334a;color:#69d4aa}.build-marker{background:#593c1c55;color:var(--amber-light)}.card-list-section ul{display:grid;gap:8px;margin-top:12px}.card-list-section li{position:relative;padding-left:16px;color:#a6b3c7;font-size:10px;line-height:1.75}.card-list-section li:before{content:"";position:absolute;top:.7em;left:3px;width:3px;height:3px;background:#627086;border-radius:50%}.card-list-section li small{color:var(--quiet);font-size:8px}.build-section{padding-top:20px;margin-top:22px;border-top:1px solid var(--line-soft);margin-bottom:24px}.build-section li:before{background:#9e6c29}.card-actions{margin-top:auto;padding-top:4px}.inspect-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:5px;text-align:left;background:#182334;border:1px solid #35445d;border-radius:5px;padding:11px 10px;font-size:9px;font-weight:550;line-height:1.6;color:#d7e6f9}.inspect-button>span{font-size:14px;font-weight:400}.inspect-button:hover{background:#203249;border-color:#57738e}.preview-link{display:flex;align-items:center;justify-content:center;gap:15px;margin:16px -24px 0;padding:15px 13px;border-top:1px solid var(--line);font-size:9px;color:#93a4bb;background:#080e1766}.preview-link:hover{color:var(--sky);background:#111d2c}.snapshot-note{display:flex;align-items:flex-start;gap:12px;margin-top:22px;padding:14px 0;color:var(--quiet);font-size:9px;line-height:1.8;max-width:1030px}.note-symbol{display:grid;place-items:center;width:13px;height:13px;margin-top:2px;flex-shrink:0;border:1px solid #526078;border-radius:50%;font-family:Georgia,serif;font-size:9px;color:#90a2bb}.snapshot-note strong{color:#a9b6c9;font-weight:500}
.tracker-section{padding:62px 0 55px;background:linear-gradient(150deg,#101724,#0a101a);border-block:1px solid var(--line)}.tracker-heading{align-items:flex-end;margin-bottom:18px}.tracker-summary{display:flex;align-items:center;gap:23px;padding-bottom:3px}.tracker-number{font-size:53px;letter-spacing:-.06em;line-height:1;color:var(--amber-light);font-weight:500}.tracker-number>span{font-size:23px;color:#495971;font-weight:400;letter-spacing:-.03em;margin-left:6px}.tracker-summary p{font-size:10px;line-height:1.8;color:var(--muted)}.tracker-summary p>strong{color:#64758d;font-weight:400}.tracker-intro{max-width:640px;color:var(--muted);font-size:12px;line-height:1.8}.roadmap-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:34px;border:1px solid #2a3549;border-radius:7px;overflow:hidden}.roadmap-step{position:relative;display:flex;align-items:center;gap:12px;text-align:left;background:#0b121f;border:0;border-right:1px solid #2a3549;min-height:94px;padding:18px 17px;color:var(--muted)}.roadmap-step:last-child{border:0}.roadmap-step.selected{background:#243023;background:linear-gradient(120deg,#302717,#161d25);box-shadow:inset 0 -2px var(--amber)}.roadmap-step:hover{background:#182130}.roadmap-step.selected:hover{background:linear-gradient(120deg,#382d1b,#1b2430)}.roadmap-step:focus-visible{outline-offset:-4px}.step-number{align-self:flex-start;padding-top:5px;font-family:var(--font-mono);font-size:10px;color:var(--quiet)}.selected .step-number{color:var(--amber-light)}.step-copy strong{display:block;font-size:11px;color:#bac6d9;font-weight:550;line-height:1.5}.selected .step-copy strong{color:#f4e5cc}.step-copy small{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:6px;letter-spacing:.025em;margin-top:9px;color:var(--quiet);line-height:1.6}.selected .step-copy small{color:var(--amber-light)}.step-copy .amber-dot{width:4px;height:4px}.step-arrow{margin-left:auto;color:#4f637e;font-size:14px}.roadmap-detail{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;border:1px solid #273347;border-radius:7px;margin-top:15px;padding:29px 31px;background:#0a111d}.roadmap-detail .section-kicker{color:var(--amber-light);font-size:7px}.roadmap-detail h3{font-size:20px;font-weight:500;letter-spacing:-.025em;margin-top:9px}.roadmap-detail p{color:var(--muted);font-size:11px;margin-top:9px;line-height:1.85;max-width:510px}.roadmap-detail ul{display:grid;gap:12px}.roadmap-detail li{position:relative;padding-left:19px;color:#bbc8db;font-size:10px;line-height:1.7}.roadmap-detail li:before{content:"↳";position:absolute;left:0;color:var(--sky)}.tracker-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:17px;color:var(--quiet);font-size:8px;line-height:1.8}.tracker-footer>span:first-child{display:flex;align-items:center;gap:8px}.tracker-footer .amber-dot{width:3px;height:3px}#tracker-source{color:#6e819b;font-family:var(--font-mono);font-size:7px;text-align:right}
.closing-section{display:flex;justify-content:space-between;align-items:center;gap:50px;padding-block:70px}.closing-section .section-kicker{font-size:8px;color:#75869f;margin-bottom:17px}.closing-section h2{font-size:31px}.closing-section>div:last-child{max-width:390px}.closing-section p:not(.section-kicker){color:var(--muted);font-size:13px;line-height:1.8}.closing-links{display:flex;gap:28px;margin-top:22px}.closing-links>a{display:flex;align-items:center;gap:18px;font-size:10px;font-weight:550;color:#d0e2f7}.closing-links>a:hover{color:var(--sky)}.site-footer{border-top:1px solid var(--line);padding-block:30px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:var(--quiet);font-size:9px}.footer-brand{font-size:19px;font-weight:650;letter-spacing:.06em;color:#c5d4e6;line-height:1.3}.footer-brand>span{display:block;font-size:6px;font-weight:400;letter-spacing:.2em;color:var(--quiet);margin-top:3px}.site-footer>p{font-size:8px;line-height:1.9}.site-footer>p>span{color:#6b7d96}.site-footer>a:not(.footer-brand){font-size:8px;color:#a4b8d0}.site-footer>a:not(.footer-brand):hover{color:var(--sky)}.site-footer>a:not(.footer-brand)>span{margin-left:8px}.footer-copyright{font-size:8px;color:var(--quiet)}
dialog{position:fixed;padding:0;width:min(860px,calc(100% - 36px));max-height:calc(100dvh - 48px);overflow:auto;margin:auto;border:1px solid #3d4c65;border-radius:13px;background:#0e1624;color:var(--ink);box-shadow:0 32px 100px #0009}dialog::backdrop{background:#03060bd9;backdrop-filter:blur(6px)}.dialog-shell{padding:28px 32px 32px}.dialog-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.dialog-topline .section-kicker{font-size:8px}.dialog-close{display:grid;place-items:center;width:32px;height:32px;background:#182335;border:1px solid #34415b;border-radius:5px;font-size:14px;color:#cbdaf0}.dialog-close:hover{background:#2a3b54}.dialog-identity{display:flex;align-items:center;gap:16px}.dialog-identity img{object-fit:contain}.dialog-identity .section-kicker{font-size:8px;color:var(--sky);margin-bottom:3px}.dialog-identity h2{font-size:32px;letter-spacing:-.04em;line-height:1.2;font-weight:600}#dialog-description{color:var(--muted);font-size:12px;line-height:1.8;margin-top:16px}.dialog-shell>.development-pill{width:fit-content;padding:8px 12px;margin-top:16px;font-size:8px}.dialog-progress{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:15px;font-size:10px;color:#a6bad3}.dialog-progress code{color:var(--amber-light);font-size:10px}.dialog-section-title{margin-top:26px;font-size:15px;font-weight:500}.dialog-architecture{display:grid;grid-template-columns:1fr 26px 1fr;align-items:center;gap:16px;margin-top:12px;padding:20px;border:1px solid #2a3b53;background:#0a111d;border-radius:6px}.dialog-architecture .section-kicker{color:#87a7c7;font-size:7px}.dialog-architecture ul{margin-top:10px;display:grid;gap:5px;font-size:11px;color:#c4d1e5}.dialog-architecture-arrow{color:var(--sky);font-size:20px;text-align:center}.dialog-lists{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:28px}.dialog-lists h3{font-size:12px;font-weight:550;line-height:1.6}.dialog-lists h3>span{color:var(--quiet);font-size:9px}.dialog-lists ul{margin-top:12px;display:grid;gap:9px}.dialog-lists li{position:relative;padding-left:13px;font-size:10px;line-height:1.8;color:#aebed3}.dialog-lists li:before{content:"";position:absolute;top:.8em;left:0;width:3px;height:3px;background:#647e9e;border-radius:50%}.dialog-lists small{font-size:9px}.dialog-note{margin-top:25px;border-top:1px solid #2a374c;padding-top:18px;color:#8fa1b9;font-size:10px;line-height:1.8}.dialog-shell>.button{margin-top:20px;font-size:10px}
@media(min-width:1500px){.hero{gap:70px}h1{font-size:69px}.system-visual{max-width:570px}.development-pill{font-size:7.5px}.card-summary{font-size:12px}.card-list-section li{font-size:11px}.card-list-section h4{font-size:11px}.card-list-section h4>span:last-child{font-size:9px}.inspect-button{font-size:10px}}
@media(max-width:1150px){.container{width:calc(100% - 64px)}.hero{gap:30px;padding-top:60px}.eyebrow{font-size:8px}.eyebrow-status{font-size:7px}.hero-description{font-size:13px}.hero-disclosure{font-size:11px}.ecosystem-nav{gap:24px}.ecosystem-nav a{font-size:10px}.ecosystem-nav a>span:not(.link-arrow):not(.current-dot){font-size:9px}.brand-link img{width:196px;height:50px}.hero-actions{gap:17px}.button{font-size:11px;gap:16px}.text-link{font-size:10px;gap:10px}.architecture-strip{gap:12px;padding:24px 20px;grid-template-columns:1.1fr 20px 1.05fr 20px .85fr}.architecture-core>a>span,.architecture-hub>a>span{display:block;margin-left:0}.architecture-strip p{font-size:8px}.architecture-destinations{font-size:9px;padding-left:15px}.specialty-grid{gap:14px}.specialty-card{padding-inline:17px}.card-topline{font-size:7px}.domain-label{font-size:5.5px}.card-identity{gap:12px}.card-identity h3{font-size:23px}.specialty-icon{width:57px;height:57px}.specialty-icon img{width:46px;height:46px}.card-identity p{font-size:9px}.subdomain{font-size:8px}.card-summary{font-size:10px;min-height:74px}.development-pill{font-size:5.9px;gap:4px;letter-spacing:0}.card-list-section h4{font-size:9px}.card-list-section h4>span:last-child{font-size:7px}.card-list-section li{font-size:9px}.inspect-button{font-size:7.7px}.preview-link{font-size:8px;margin-inline:-17px}.filter-button{font-size:9px;padding-inline:9px}.filter-count{font-size:7px}.roadmap-step{gap:8px;padding-inline:12px}.step-copy strong{font-size:9px}.step-copy small{font-size:5.5px}.roadmap-detail{gap:35px}.hub-node{min-height:80px}.hub-node strong{font-size:19px}.hub-node img{width:39px;height:39px}.visual-topline{font-size:6px}.visual-bottomline{font-size:5.5px}.mini-node{padding:12px 5px 9px}.mini-node img{width:24px;height:24px;margin-bottom:6px}.mini-node strong{font-size:9px}.mini-node>span{font-size:5px}.orbit-label{font-size:5px}.core-node{min-width:165px;padding:10px 12px}.core-node strong{font-size:11px}.core-node small{font-size:5px}.core-node .core-symbol{font-size:17px}}
@media(max-width:900px){.banner-inner{justify-content:flex-start}.banner-inner p{font-size:9px}.banner-inner strong{font-size:8px}.banner-divider{padding-inline:5px}.site-header{gap:22px}.ecosystem-nav{gap:18px}.brand-link img{width:170px;height:46px}.ecosystem-nav a{font-size:9px;column-gap:8px}.ecosystem-nav a>span:not(.link-arrow):not(.current-dot){font-size:8px}.hero{grid-template-columns:1fr .85fr;gap:20px}.hero h1{font-size:43px}.hero-description{font-size:12px}.hero-disclosure{font-size:10px}.eyebrow-status{margin-left:0;padding-left:0;border:0;width:100%;padding-top:3px}.eyebrow{margin-bottom:20px}.hero-actions{align-items:flex-start;flex-direction:column;gap:16px}.hero-footnote{font-size:8px}.system-visual{aspect-ratio:520/570;align-self:center}.core-node{top:17%;min-width:150px}.connection-lines{transform:scaleY(.86);transform-origin:50% 58%}.hub-node{top:36%;min-height:71px;width:66%;gap:8px}.hub-node strong{font-size:17px}.hub-node img{width:32px;height:32px}.hub-node div>span{font-size:5px}.hub-indicator{top:9px;right:9px;width:3px;height:3px}.specialty-nodes{top:67%;gap:7px;left:0;right:0}.mini-node strong{font-size:8px}.mini-node>span{font-size:4px}.visual-topline{font-size:5px}.visual-bottomline{font-size:4.8px;gap:6px}.architecture-strip{grid-template-columns:1fr 20px 1fr;gap:12px}.architecture-strip>.architecture-arrow:nth-of-type(2){display:none}.architecture-destinations{grid-column:1/-1;display:flex;justify-content:space-between;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:14px;margin-top:7px;font-size:8px;gap:8px}.architecture-core>a>span,.architecture-hub>a>span{display:inline-block;margin-left:4px}.section-heading{gap:30px}.section-heading h2{font-size:33px}.section-heading>p{max-width:280px;font-size:11px}.specialties-section{padding-top:65px}.filter-row{align-items:flex-start;flex-direction:column;gap:10px}.filter-count{font-size:8px}.specialty-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.specialty-card{padding-inline:22px}.specialty-card:last-child{grid-column:1/-1;max-width:calc(50% - 9px)}.card-topline{font-size:8px}.domain-label{font-size:6px}.card-summary{font-size:11px;min-height:65px}.card-identity h3{font-size:26px}.card-identity p{font-size:10px}.development-pill{font-size:6.5px}.card-list-section h4{font-size:10px}.card-list-section h4>span:last-child{font-size:8px}.card-list-section li{font-size:10px}.inspect-button{font-size:8.5px}.preview-link{font-size:9px;margin-inline:-22px}.roadmap-steps{grid-template-columns:1fr 1fr}.roadmap-step{padding:18px;min-height:90px}.roadmap-step:nth-child(2){border-right:0}.roadmap-step:nth-child(-n+2){border-bottom:1px solid #2a3549}.step-copy strong{font-size:11px}.step-copy small{font-size:6px}.step-number{font-size:11px}.roadmap-detail{gap:25px;padding:25px}.roadmap-detail h3{font-size:18px}.roadmap-detail p{font-size:10px}.roadmap-detail li{font-size:9px}.tracker-summary{gap:15px}.tracker-number{font-size:42px}.tracker-number>span{font-size:19px}.tracker-summary p{font-size:8px}.tracker-footer{font-size:7px}.closing-section{gap:35px}.closing-section h2{font-size:28px}.closing-section>div:last-child{max-width:280px}.closing-section p:not(.section-kicker){font-size:11px}.closing-links{gap:20px}.closing-links>a{font-size:8px;gap:9px}.site-footer{gap:18px}.footer-brand{font-size:16px}.site-footer>a:not(.footer-brand){font-size:7px}.footer-copyright{font-size:7px}}
@media(max-width:650px){.container{width:calc(100% - 36px)}.banner-inner{gap:9px;padding-block:10px}.banner-inner p{font-size:8px;line-height:1.7}.banner-inner strong{display:block;font-size:7px;letter-spacing:.055em}.banner-divider{display:none}.banner-inner>.pulse-dot{align-self:flex-start;margin-top:6px;width:5px;height:5px}.site-header{padding-top:20px;padding-bottom:16px;display:block}.brand-link{display:block;width:fit-content}.brand-link img{width:183px;height:45px}.ecosystem-nav{justify-content:space-between;gap:13px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line-soft)}.ecosystem-nav a{font-size:9px;column-gap:7px}.ecosystem-nav a>span:not(.link-arrow):not(.current-dot){font-size:7px}.hero{display:flex;flex-direction:column;align-items:stretch;gap:40px;padding-top:45px;padding-bottom:37px}.eyebrow{font-size:7px;gap:6px;margin-bottom:19px}.eyebrow-status{font-size:6px;display:inline;width:auto;padding-left:8px;border-left:1px solid #65502f;margin-left:0;padding-top:0}.eyebrow .small-cross{font-size:16px}.hero h1{font-size:clamp(36px,9.6vw,55px);letter-spacing:-.055em;line-height:1.1}.hero-description{font-size:13px;margin-top:23px;max-width:440px}.hero-disclosure{font-size:11px;max-width:420px}.hero-actions{flex-direction:row;align-items:center;gap:22px;margin-top:23px}.button{font-size:10px;gap:14px;padding:11px 13px}.text-link{font-size:9px;gap:9px}.hero-footnote{font-size:8px;margin-top:24px}.system-visual{aspect-ratio:520/490;max-width:460px;align-self:center}.visual-topline{font-size:6px}.visual-bottomline{font-size:5.5px}.core-node{top:12%;padding:9px 14px;min-width:174px}.core-node strong{font-size:12px}.core-node small{font-size:5px}.connection-lines{transform:none}.hub-node{top:35%;width:56%;min-height:76px;gap:10px}.hub-node strong{font-size:21px}.hub-node img{width:39px;height:39px}.hub-node div>span{font-size:6px}.specialty-nodes{top:71%;left:3%;right:3%;gap:10px}.mini-node{padding:12px 5px 10px}.mini-node img{width:26px;height:26px;margin-bottom:7px}.mini-node strong{font-size:9px}.mini-node>span{font-size:5px}.architecture-strip{padding:20px 17px;grid-template-columns:1fr 15px 1fr;gap:9px}.architecture-strip .section-kicker{font-size:5.5px;letter-spacing:.08em}.architecture-core>a,.architecture-hub>a{font-size:11px}.architecture-core>a>span,.architecture-hub>a>span{display:block;font-size:8px;margin-left:0}.architecture-strip p{font-size:7px;line-height:1.7}.architecture-arrow{font-size:17px}.architecture-destinations{flex-wrap:wrap;column-gap:15px;row-gap:7px;font-size:7px;padding-top:12px}.architecture-destinations>a{gap:6px}.specialties-section{padding-top:51px;padding-bottom:37px}.section-heading{align-items:flex-start;flex-direction:column;gap:19px;margin-bottom:25px}.section-heading .section-kicker{font-size:8px;margin-bottom:13px}.section-heading h2{font-size:32px}.section-heading>p{font-size:11px;max-width:390px}.filter-group{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:6px}.filter-button{justify-content:center;font-size:8px;padding:9px 6px;border-color:#202d40}.filter-row{padding-bottom:13px;margin-bottom:21px;gap:13px}.filter-count{font-size:7px}.specialty-grid{grid-template-columns:1fr;gap:23px}.specialty-card{padding:24px 23px 0}.specialty-card:last-child{grid-column:auto;max-width:none}.card-topline{font-size:8px}.domain-label{font-size:6px}.card-identity{margin-top:24px;gap:15px}.card-identity h3{font-size:29px}.card-identity p{font-size:11px}.specialty-icon{width:66px;height:66px}.specialty-icon img{width:53px;height:53px}.subdomain{font-size:10px;margin-top:19px}.card-summary{min-height:0;font-size:12px;line-height:1.85}.development-pill{font-size:7px;margin-top:18px;padding-block:9px;gap:6px}.progress-label{font-size:11px}.progress-label strong{font-size:24px}.progress-block>p{font-size:7px}.card-list-section h4{font-size:11px}.card-list-section h4>span:last-child{font-size:9px}.card-list-section li{font-size:11px}.card-list-section li small{font-size:9px}.card-list-section ul{gap:9px}.inspect-button{font-size:9px;padding:12px}.preview-link{margin-inline:-23px;font-size:9px;padding-block:17px}.snapshot-note{font-size:8px;margin-top:18px;padding-bottom:0}.tracker-section{padding-top:42px;padding-bottom:29px}.tracker-heading{gap:25px}.tracker-summary{padding-bottom:0;gap:20px}.tracker-number{font-size:40px}.tracker-summary p{font-size:9px}.tracker-intro{font-size:11px;margin-top:5px}.roadmap-steps{margin-top:26px}.roadmap-step{padding:15px 12px;gap:9px;min-height:93px;align-items:flex-start}.step-number{font-size:9px;padding-top:2px}.step-copy strong{font-size:10px}.step-copy small{font-size:5px;margin-top:8px}.step-arrow{display:none}.roadmap-detail{grid-template-columns:1fr;gap:22px;padding:22px 19px}.roadmap-detail h3{font-size:20px}.roadmap-detail p{font-size:11px}.roadmap-detail li{font-size:10px}.tracker-footer{align-items:flex-start;flex-direction:column;gap:12px;font-size:7px}.tracker-footer>span:first-child{align-items:flex-start}.tracker-footer .amber-dot{margin-top:4px}#tracker-source{font-size:6px;text-align:left}.closing-section{align-items:flex-start;flex-direction:column;gap:24px;padding-block:44px}.closing-section h2{font-size:31px}.closing-section>div:last-child{max-width:360px}.closing-section p:not(.section-kicker){font-size:12px}.closing-links{gap:28px;margin-top:20px}.closing-links>a{font-size:10px;gap:13px}.site-footer{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:24px;padding-block:28px}.site-footer>p{text-align:right;font-size:7px}.site-footer>a:not(.footer-brand){font-size:7px}.footer-copyright{text-align:right;font-size:7px}.dialog-shell{padding:18px 19px 24px}.dialog-topline{margin-bottom:21px}.dialog-topline .section-kicker{font-size:7px}.dialog-identity h2{font-size:28px}.dialog-identity img{width:48px;height:48px}.dialog-identity .section-kicker{font-size:7px}#dialog-description{font-size:11px}.dialog-shell>.development-pill{font-size:6px;width:100%;padding-inline:4px}.dialog-progress{font-size:8px;align-items:flex-start}.dialog-progress code{font-size:8px;white-space:nowrap}.dialog-architecture{grid-template-columns:1fr;gap:12px;padding:17px}.dialog-architecture-arrow{transform:rotate(90deg);font-size:17px;line-height:1}.dialog-architecture .section-kicker{font-size:6px}.dialog-architecture ul{font-size:10px}.dialog-lists{grid-template-columns:1fr;gap:23px}.dialog-note{font-size:9px}.dialog-shell>.button{font-size:9px;width:100%;gap:10px}}
@media(max-width:370px){.container{width:calc(100% - 28px)}.eyebrow{font-size:6px}.eyebrow-status{font-size:5px;padding-left:6px}.ecosystem-nav a{font-size:8px}.ecosystem-nav{gap:10px}.ecosystem-nav a>span:not(.link-arrow):not(.current-dot){font-size:6px}.hero-actions{gap:17px}.button{font-size:9px;gap:11px;padding:10px 11px}.text-link{font-size:8px}.system-visual .hub-node{min-height:66px;gap:7px}.hub-node img{width:32px;height:32px}.hub-node strong{font-size:17px}.hub-node div>span{font-size:5px}.mini-node{padding-block:10px 8px}.mini-node img{width:22px;height:22px}.mini-node strong{font-size:8px}.mini-node>span{font-size:4px}.core-node{min-width:151px;padding:7px 12px}.core-node strong{font-size:10px}.visual-topline{font-size:5px}.visual-bottomline{font-size:4.5px}.specialty-card{padding-inline:18px}.development-pill{font-size:6px}.card-list-section h4{font-size:10px}.card-list-section h4>span:last-child{font-size:8px}.inspect-button{font-size:8px}.preview-link{margin-inline:-18px;font-size:8px}.domain-label{font-size:5px}.step-copy strong{font-size:9px}.step-copy small{font-size:4.5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.mini-node:hover{transform:none}}

/* Keep product status and evidence readable at every viewport. Smaller type is
   reserved for decorative network labels, never development disclosures. */
.development-banner,.banner-inner p,.banner-inner strong{font-size:11px;line-height:1.7}
.eyebrow,.eyebrow-status{font-size:10px;line-height:1.6}
.eyebrow-status{letter-spacing:.035em}
.hero-disclosure{font-size:12px}.hero-footnote{font-size:10px}
.filter-button{font-size:11px;padding:9px 12px}.filter-count{font-size:9px}
.card-topline{font-size:9px}.domain-label{font-size:8px}
.card-identity p{font-size:12px}.subdomain{font-size:11px}
.card-summary{font-size:12px;min-height:0;line-height:1.85}
.development-pill,.dialog-shell>.development-pill{font-size:10px;line-height:1.65;text-align:center;padding:9px 10px;letter-spacing:.015em;overflow-wrap:anywhere}
.progress-label{font-size:12px}.progress-block>p{font-size:9px;line-height:1.8}
.card-list-section h4{font-size:12px;line-height:1.75}.card-list-section h4>span:last-child{font-size:10px}
.card-list-section li{font-size:12px;line-height:1.8}.card-list-section li small{font-size:10px}
.inspect-button{font-size:11px;padding:12px;line-height:1.75}.inspect-button>span{flex-shrink:0}
.preview-link{font-size:11px;line-height:1.7;text-align:center}
.snapshot-note{font-size:10px;line-height:1.8}.no-script-note{margin:0 0 22px;padding:14px 17px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:12px;line-height:1.8}
.step-copy strong{font-size:12px;line-height:1.6}.step-copy small{font-size:9px;line-height:1.65}.step-number{font-size:11px}
.roadmap-step{min-height:115px}.roadmap-detail p,.roadmap-detail li{font-size:12px;line-height:1.85}.roadmap-detail .section-kicker{font-size:9px}
.tracker-summary p{font-size:11px}.tracker-intro{font-size:12px}.tracker-footer,#tracker-source{font-size:9px;line-height:1.8}
.dialog-topline .section-kicker,.dialog-identity .section-kicker,.dialog-architecture .section-kicker{font-size:9px}
#dialog-description,.dialog-architecture ul,.dialog-lists li{font-size:12px;line-height:1.8}
.dialog-lists h3{font-size:13px}.dialog-lists h3>span,.dialog-lists small{font-size:10px}
.dialog-progress{font-size:11px;flex-wrap:wrap;gap:8px 20px}.dialog-progress code{font-size:10px}
.dialog-note{font-size:11px}.dialog-shell>.button{font-size:11px}
@media(min-width:651px) and (max-width:1100px){
  .specialty-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .specialty-card{padding:24px 22px 0}.specialty-card:last-child{grid-column:1/-1;max-width:calc(50% - 10px)}
  .preview-link{margin-inline:-22px}.card-identity h3{font-size:28px}
  .roadmap-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roadmap-step:nth-child(2){border-right:0}.roadmap-step:nth-child(-n+2){border-bottom:1px solid #2a3549}
}
@media(max-width:650px){
  .eyebrow-status{width:100%;padding-left:0;border:0;margin-top:3px}
  .filter-button{padding:9px 8px;line-height:1.65}
  .development-pill,.dialog-shell>.development-pill{padding-inline:8px;gap:7px}
  .roadmap-step{padding:16px 11px;gap:8px;min-height:134px}
  .step-copy small{font-size:9px}.step-copy .amber-dot{margin-top:4px;align-self:flex-start}
  .tracker-footer>span:first-child{gap:8px}.tracker-footer .amber-dot{margin-top:6px}
  .dialog-shell>.button{font-size:10px}.dialog-architecture{padding:16px}
}
.apex-wordmark{display:block;box-sizing:content-box;padding:4px 7px;border-radius:7px;background:#f8fafc}
.apex-wordmark.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;background:transparent!important}

/* ==========================================================================
   AVILITI / RichRoyalties / ICDfuture Family Unified Visual System
   ========================================================================== */
:root {
  --page-bg: #040714;
  --surface: rgba(11, 18, 36, 0.78);
  --surface-raised: rgba(15, 25, 48, 0.88);
  --line: rgba(139, 92, 246, 0.26);
  --line-soft: rgba(56, 189, 248, 0.18);
  --ink: #f8fafc;
  --muted: #cbd5e1;
  --quiet: #94a3b8;
  --sky: #38bdf8;
  --violet: #a78bfa;
  --violet-bright: #c4b5fd;
  --emerald: #68e0b5;
  --font-ui: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
}

body {
  position: relative;
  background-color: var(--page-bg);
  overflow-x: hidden;
}

#avilities-three-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

.ambient-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 14%, rgba(139, 92, 246, 0.22) 0%, transparent 44%),
    radial-gradient(circle at 84% 20%, rgba(56, 189, 248, 0.20) 0%, transparent 46%),
    radial-gradient(circle at 52% 80%, rgba(104, 224, 181, 0.12) 0%, transparent 52%),
    linear-gradient(180deg, rgba(4, 7, 20, 0.72) 0%, rgba(7, 13, 28, 0.56) 50%, rgba(4, 7, 20, 0.88) 100%);
}

.subtle-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(167, 139, 250, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.68) 15%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.68) 15%, transparent 82%);
}

.development-banner,
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}

.development-banner {
  background: linear-gradient(90deg, rgba(28, 19, 8, 0.92) 0%, rgba(45, 29, 10, 0.95) 50%, rgba(28, 19, 8, 0.92) 100%);
  border-bottom: 1px solid rgba(245, 158, 11, 0.38);
  backdrop-filter: blur(14px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-top: 12px;
  padding: 16px 26px;
  border-radius: 18px;
  background: rgba(7, 12, 26, 0.78);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(167, 139, 250, 0.25);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 28px rgba(139, 92, 246, 0.12);
}

.brand-link img {
  width: 254px;
  height: 58px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 6px 20px rgba(139, 92, 246, 0.26));
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease;
}

.brand-link:hover img {
  transform: translateY(-1px);
  filter: drop-shadow(0 8px 26px rgba(56, 189, 248, 0.36));
}

.ecosystem-nav {
  gap: 12px;
}

.ecosystem-nav a {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.55);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ecosystem-nav a:hover {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(30, 41, 69, 0.78);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.16);
}

.ecosystem-nav a.current-site {
  border-color: rgba(167, 139, 250, 0.65);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(56, 189, 248, 0.16));
  color: #f8fafc;
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.25);
}

.current-dot {
  background: #68e0b5;
  box-shadow: 0 0 8px #68e0b5;
}

h1, h2, h3,
.core-node strong,
.hub-node strong,
.mini-node strong,
.tracker-number,
.footer-brand {
  font-family: var(--font-display);
}

.eyebrow {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.38);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.16);
  color: #e2e8f0;
}

h1 {
  font-weight: 800;
  letter-spacing: -0.04em;
  text-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

h1 > span,
.section-heading h2 > span {
  background: linear-gradient(135deg, #c4b5fd 0%, #38bdf8 52%, #68e0b5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.primary-button {
  border-radius: 12px;
  padding: 14px 24px;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 52%, #0ea5e9 100%);
  border: 1px solid rgba(196, 181, 253, 0.48);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.38), 0 0 20px rgba(56, 189, 248, 0.25);
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.primary-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 52%, #38bdf8 100%);
  box-shadow: 0 14px 36px rgba(124, 58, 237, 0.52), 0 0 28px rgba(56, 189, 248, 0.4);
}

.text-link {
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background: rgba(15, 23, 42, 0.6);
  transition: all 0.25s ease;
}

.text-link:hover {
  border-color: rgba(56, 189, 248, 0.65);
  background: rgba(30, 41, 69, 0.82);
  transform: translateY(-2px);
}

.system-visual {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background:
    radial-gradient(circle at 50% 44%, rgba(139, 92, 246, 0.24) 0%, rgba(56, 189, 248, 0.14) 42%, rgba(8, 13, 28, 0.92) 78%),
    linear-gradient(160deg, rgba(16, 20, 44, 0.88) 0%, rgba(7, 11, 24, 0.95) 100%);
  backdrop-filter: blur(20px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65), 0 0 48px rgba(139, 92, 246, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.visual-topline {
  top: 16px;
  left: 22px;
  right: 22px;
  border-top: 0;
  padding-top: 0;
}

.visual-bottomline {
  bottom: 16px;
  left: 22px;
  right: 22px;
  border-bottom: 0;
  padding-bottom: 0;
}

.orbit-one {
  border-color: rgba(167, 139, 250, 0.28);
  border-style: dashed;
  animation: avilitiesSpinCW 24s linear infinite;
}

.orbit-two {
  border-color: rgba(56, 189, 248, 0.22);
  animation: avilitiesSpinCCW 32s linear infinite;
}

.orbit-three {
  border-color: rgba(104, 224, 181, 0.16);
}

.core-node {
  border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, 0.48);
  background: linear-gradient(135deg, rgba(10, 22, 46, 0.94), rgba(6, 14, 32, 0.96));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(56, 189, 248, 0.24);
  transition: all 0.25s ease;
  padding: 9px 15px 9px 11px;
  gap: 12px;
}

.core-badge-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.55));
}

.core-badge-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}

.core-node:hover {
  border-color: #38bdf8;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 28px rgba(56, 189, 248, 0.38);
}

.hub-node {
  width: 62%;
  border-radius: 18px;
  border: 1.5px solid rgba(167, 139, 250, 0.62);
  background: linear-gradient(135deg, rgba(24, 16, 52, 0.92) 0%, rgba(12, 22, 44, 0.94) 100%);
  box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.10), 0 16px 50px rgba(139, 92, 246, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hub-orb-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.avilities-orb-svg {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.52));
}

.avilities-orbit-cw {
  transform-origin: 70px 70px;
  animation: avilitiesSpinCW 12s linear infinite;
}

.avilities-orbit-ccw {
  transform-origin: 70px 70px;
  animation: avilitiesSpinCCW 9s linear infinite;
}

.avilities-hex-shell {
  transform-origin: 70px 70px;
  animation: avilitiesHexPulse 3.4s ease-in-out infinite;
}

.avil-core-photon {
  transform-box: fill-box;
  transform-origin: center;
  animation: avilCorePhotonPulse 2.4s ease-in-out infinite;
}

.avil-node-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: avilNodeHaloBloom 2.4s ease-in-out infinite;
}

.avil-outer-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: avilOuterNodeGlow 2.4s ease-in-out infinite;
}

@keyframes avilCorePhotonPulse {
  0%, 16%, 100% {
    transform: scale(1.22);
    filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 14px #38bdf8);
  }
  45%, 80% {
    transform: scale(0.92);
    filter: drop-shadow(0 0 4px #38bdf8);
  }
}

@keyframes avilNodeHaloBloom {
  0%, 52%, 100% {
    opacity: 0.22;
    transform: scale(0.86);
  }
  68%, 84% {
    opacity: 0.96;
    transform: scale(1.32);
  }
}

@keyframes avilOuterNodeGlow {
  0%, 52%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  68%, 84% {
    transform: scale(1.16);
    filter: brightness(1.38) drop-shadow(0 0 8px rgba(255, 255, 255, 0.85));
  }
}

@keyframes avilitiesSpinCW {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes avilitiesSpinCCW {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes avilitiesHexPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.mini-node {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(160deg, rgba(17, 25, 44, 0.9) 0%, rgba(10, 15, 28, 0.95) 100%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.mini-node:nth-child(1) { border-color: rgba(56, 189, 248, 0.48); }
.mini-node:nth-child(2) { border-color: rgba(129, 140, 248, 0.42); }
.mini-node:nth-child(3) { border-color: rgba(251, 113, 133, 0.52); background: linear-gradient(160deg, rgba(29, 14, 48, 0.92) 0%, rgba(15, 11, 29, 0.96) 100%); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.48), 0 0 20px rgba(251, 113, 133, 0.16); }

.mini-node:hover {
  transform: translateY(-4px);
  border-color: var(--sky);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 24px rgba(56, 189, 248, 0.25);
}

.mini-node img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.architecture-strip {
  border-radius: 20px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background: linear-gradient(120deg, rgba(15, 22, 42, 0.82) 0%, rgba(18, 14, 38, 0.86) 50%, rgba(10, 20, 38, 0.84) 100%);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 32px rgba(139, 92, 246, 0.10);
}

.filter-button {
  border-radius: 999px;
  padding: 9px 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.55);
  transition: all 0.22s ease;
}

.filter-button.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.38), rgba(14, 165, 233, 0.32));
  border-color: rgba(167, 139, 250, 0.68);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.28);
}

.specialty-grid {
  gap: 24px;
}

.specialty-card {
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(16, 24, 46, 0.86) 0%, rgba(10, 15, 30, 0.94) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(129, 140, 248, 0.34);
  border-top: 3px solid #7c3aed;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.52), 0 0 32px rgba(124, 58, 237, 0.12);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}

.specialty-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mouse-x, 50%) var(--mouse-y, 20%), rgba(167, 139, 250, 0.12), transparent 65%);
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}

.specialty-card:hover {
  transform: translateY(-6px);
  border-color: rgba(167, 139, 250, 0.68);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.65), 0 0 42px rgba(124, 58, 237, 0.24);
}

.specialty-card:hover::after {
  opacity: 1;
}

.specialty-card.readyops-card {
  --specialty-accent: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.36);
  border-top: 3px solid #38bdf8;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.52), 0 0 32px rgba(56, 189, 248, 0.14);
}

.specialty-card.readyops-card:hover {
  border-color: rgba(168, 85, 247, 0.72);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.65), 0 0 42px rgba(56, 189, 248, 0.26);
}

.specialty-card.pass-card {
  --specialty-accent: #fda4af;
  border-color: rgba(251, 113, 133, 0.38);
  border-top: 3px solid #fb7185;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.52), 0 0 32px rgba(251, 113, 133, 0.14);
}

.specialty-card.pass-card:hover {
  border-color: rgba(251, 113, 133, 0.76);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.65), 0 0 42px rgba(251, 113, 133, 0.26);
}

.specialty-icon {
  border-radius: 16px;
  background: rgba(8, 13, 26, 0.9);
  border: 1.5px solid rgba(167, 139, 250, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(124, 58, 237, 0.28);
}

.readyops-card .specialty-icon {
  border-color: rgba(56, 189, 248, 0.52);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.28);
}

.pass-card .specialty-icon {
  border-color: rgba(251, 113, 133, 0.52);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(251, 113, 133, 0.28);
}

.development-pill {
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.42);
}

.progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.85);
}

.progress-track > span {
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #38bdf8);
}

.readyops-card .progress-track > span {
  background: linear-gradient(90deg, #38bdf8, #a855f7, #ec4899, #68e0b5);
}

.pass-card .progress-track > span {
  background: linear-gradient(90deg, #38bdf8, #c084fc, #fb7185, #34d399);
}

.inspect-button {
  border-radius: 12px;
  background: rgba(23, 35, 58, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.28);
  font-weight: 600;
  transition: all 0.22s ease;
}

.inspect-button:hover {
  background: rgba(34, 51, 84, 0.92);
  border-color: rgba(56, 189, 248, 0.58);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.16);
}

.preview-link {
  background: rgba(9, 15, 29, 0.78);
  font-weight: 600;
  transition: all 0.22s ease;
}

.preview-link.is-disabled,
.button.is-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px dashed rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.09);
  color: #fcd34d;
  cursor: default;
  user-select: none;
}

.card-actions {
  padding-bottom: 24px;
}

.subdomain {
  cursor: pointer;
}

.subdomain > span {
  color: #38bdf8;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tracker-section {
  background: linear-gradient(180deg, rgba(12, 18, 36, 0.78) 0%, rgba(7, 11, 24, 0.88) 100%);
  backdrop-filter: blur(16px);
  border-block: 1px solid rgba(167, 139, 250, 0.24);
}

.roadmap-steps {
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.roadmap-detail {
  border-radius: 18px;
  border-color: rgba(167, 139, 250, 0.3);
  background: linear-gradient(145deg, rgba(13, 20, 38, 0.88), rgba(8, 13, 26, 0.94));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

dialog {
  border-radius: 22px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: linear-gradient(165deg, #10182e 0%, #090e1d 100%);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.8), 0 0 50px rgba(139, 92, 246, 0.24);
}

/* ==========================================================================
   ORGANIZATIONAL CHART / WORKFLOW + ANIMATED LIGHT BALL & CARD ILLUMINATION
   AVILITI (Core) -> AVILITIES (Hub) -> ReadyOps / APEX / PASS -> + PACE
   ========================================================================== */
:root {
  --org-cycle: 6.4s;
  --org-col-gap: 14px;
}

.system-visual.org-workflow-visual {
  aspect-ratio: unset;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 22px 18px;
  overflow: hidden;
}

.org-workflow-visual .visual-topline,
.org-workflow-visual .visual-bottomline {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  z-index: 3;
}

.org-workflow-visual .visual-topline {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(167, 139, 250, 0.22);
  margin-bottom: 18px;
}

.org-workflow-visual .visual-bottomline {
  padding-top: 14px;
  border-top: 1px solid rgba(167, 139, 250, 0.22);
  margin-top: 18px;
}

.org-chart-flow {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Override legacy absolute positioning inside the Org-Chart Flow */
.org-chart-flow .core-node,
.org-chart-flow .hub-node,
.org-chart-flow .specialty-nodes {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
}

.org-chart-flow .core-node:hover {
  transform: translateY(-2px);
}

.org-chart-flow .hub-node {
  width: min(72%, 340px);
  min-height: 86px;
}

/* --------------------------------------------------------------------------
   WORKFLOW CONNECTOR 1: AVILITI -> AVILITIES VERTICAL STEM
   -------------------------------------------------------------------------- */
.org-stem-core-to-hub {
  position: relative;
  width: 24px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.org-stem-track {
  width: 2.5px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.85) 0%, rgba(167, 139, 250, 0.85) 100%);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
  animation: orgTrackPulse1 var(--org-cycle) ease-in-out infinite;
}

.org-junction-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  border: 1.5px solid #e0f2fe;
  box-shadow: 0 0 10px #38bdf8;
  z-index: 3;
}

.org-node-top {
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
}

.org-node-bottom {
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  background: #c4b5fd;
  box-shadow: 0 0 10px #a78bfa;
}

/* --------------------------------------------------------------------------
   WORKFLOW CONNECTOR 2: AVILITIES -> SPECIALTIES 3-WAY ORG-CHART BUS
   -------------------------------------------------------------------------- */
.org-branch-bus {
  --col-1-x: calc((100% - (var(--org-col-gap) * 2)) / 6);
  --col-3-x: calc(100% - ((100% - (var(--org-col-gap) * 2)) / 6));
  position: relative;
  width: 100%;
  height: 58px;
}

.org-bus-trunk {
  position: absolute;
  left: 50%;
  top: 0;
  height: 50%;
  width: 2.5px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #a78bfa 0%, #38bdf8 100%);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.5);
  animation: orgTrackPulse2 var(--org-cycle) ease-in-out infinite;
}

.org-bus-horizontal {
  position: absolute;
  top: 50%;
  left: var(--col-1-x);
  right: var(--col-1-x);
  height: 2.5px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8 0%, #818cf8 50%, #fb7185 100%);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.42);
  animation: orgTrackPulse2 var(--org-cycle) ease-in-out infinite;
}

.org-bus-drop {
  position: absolute;
  top: 50%;
  bottom: 0;
  width: 2.5px;
  transform: translateX(-50%);
  border-radius: 999px;
  animation: orgTrackPulse2 var(--org-cycle) ease-in-out infinite;
}

.org-bus-drop-left {
  left: var(--col-1-x);
  background: linear-gradient(180deg, #38bdf8 0%, #a855f7 100%);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
}

.org-bus-drop-center {
  left: 50%;
  background: linear-gradient(180deg, #818cf8 0%, #c4b5fd 100%);
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.45);
}

.org-bus-drop-right {
  left: var(--col-3-x);
  background: linear-gradient(180deg, #38bdf8 0%, #fb7185 100%);
  box-shadow: 0 0 10px rgba(251, 113, 133, 0.45);
}

.org-bus-hub-dot {
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  background: #c4b5fd;
}

.org-bus-center-dot {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #38bdf8;
}

.org-bus-left-dot {
  top: 50%;
  left: var(--col-1-x);
  transform: translate(-50%, -50%);
  background: #38bdf8;
}

.org-bus-right-dot {
  top: 50%;
  left: var(--col-3-x);
  transform: translate(-50%, -50%);
  background: #fb7185;
  box-shadow: 0 0 10px #fb7185;
}

/* --------------------------------------------------------------------------
   TIER 3 & TIER 4: SPECIALTY COLUMNS + PACE DIRECTLY BELOW PASS
   -------------------------------------------------------------------------- */
.specialty-nodes.org-specialty-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--org-col-gap);
  width: 100%;
  align-items: start;
}

.org-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.org-col-pass {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.pace-addon-branch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.pace-addon-connector {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 100%;
}

.pace-connector-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2.5px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #38bdf8 0%, #fb7185 52%, #34d399 100%);
  box-shadow: 0 0 12px rgba(251, 113, 133, 0.55);
  animation: orgTrackPulse3 var(--org-cycle) ease-in-out infinite;
}

.pace-dot-top {
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  background: #fb7185;
  box-shadow: 0 0 10px #fb7185;
}

.pace-dot-bottom {
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
}

.pace-plus-badge {
  position: relative;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1b1035, #330d26);
  border: 1.5px solid #fb7185;
  color: #6ee7b7;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 12px rgba(251, 113, 133, 0.55), 0 0 18px rgba(52, 211, 153, 0.35);
  animation: orgPlusBadgeGlow var(--org-cycle) ease-in-out infinite;
}

.mini-node.pace-mini-node {
  border-color: rgba(251, 113, 133, 0.62);
  background: linear-gradient(160deg, rgba(29, 14, 48, 0.95) 0%, rgba(15, 22, 38, 0.97) 100%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.52), 0 0 22px rgba(251, 113, 133, 0.20);
  padding-top: 15px;
  padding-bottom: 11px;
}

.mini-node.pace-mini-node:hover {
  border-color: #6ee7b7;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6), 0 0 30px rgba(251, 113, 133, 0.42), 0 0 22px rgba(52, 211, 153, 0.32);
}

.pace-mini-node .pace-addon-tag {
  position: absolute;
  left: 7px;
  top: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(244, 63, 94, 0.20);
  border: 1px solid rgba(251, 113, 133, 0.52);
  color: #fda4af;
  font-family: var(--font-mono);
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pace-mini-node strong {
  background: linear-gradient(135deg, #ffffff 15%, #fda4af 65%, #6ee7b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pace-mini-node > span:not(.pace-addon-tag) {
  color: #fda4af;
}

.pace-mini-node i {
  background: #fb7185;
  box-shadow: 0 0 8px #fb7185;
}

/* --------------------------------------------------------------------------
   THE ANIMATED LIGHT BALLS (PHOTON ORBS TRAVELING DOWN THE ORG CHART)
   -------------------------------------------------------------------------- */
.org-light-ball {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #e0f2fe 38%, #38bdf8 72%, rgba(56, 189, 248, 0) 100%);
  box-shadow:
    0 0 10px 3px #ffffff,
    0 0 22px 7px #38bdf8,
    0 0 36px 12px rgba(167, 139, 250, 0.85);
  pointer-events: none;
  z-index: 6;
  opacity: 0;
}

.org-light-ball.ball-pass-to-pace {
  background: radial-gradient(circle, #ffffff 0%, #ffe4e6 35%, #fb7185 70%, rgba(52, 211, 153, 0) 100%);
  box-shadow:
    0 0 10px 3px #ffffff,
    0 0 22px 7px #fb7185,
    0 0 36px 12px rgba(52, 211, 153, 0.85);
}

/* Ball 1: AVILITI -> AVILITIES (11% to 26% of cycle) */
.ball-core-to-hub {
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ballCoreToHub var(--org-cycle) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ballCoreToHub {
  0%, 9% {
    top: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  12% {
    top: 8%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  24% {
    top: 94%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  27%, 100% {
    top: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
}

/* Ball 2A: AVILITIES -> ReadyOps (Left Branch: 39% to 57% of cycle) */
.ball-bus-left {
  transform: translate(-50%, -50%);
  animation: ballBusLeft var(--org-cycle) linear infinite;
}

@keyframes ballBusLeft {
  0%, 38% {
    left: 50%;
    top: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  41% {
    left: 50%;
    top: 10%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  46% {
    left: 50%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  52% {
    left: var(--col-1-x);
    top: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  56% {
    left: var(--col-1-x);
    top: 96%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  59%, 100% {
    left: var(--col-1-x);
    top: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
}

/* Ball 2B: AVILITIES -> APEX (Center Branch: 39% to 57% of cycle) */
.ball-bus-center {
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ballBusCenter var(--org-cycle) linear infinite;
}

@keyframes ballBusCenter {
  0%, 38% {
    top: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  41% {
    top: 10%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  56% {
    top: 96%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  59%, 100% {
    top: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
}

/* Ball 2C: AVILITIES -> PASS (Right Branch: 39% to 57% of cycle) */
.ball-bus-right {
  transform: translate(-50%, -50%);
  animation: ballBusRight var(--org-cycle) linear infinite;
}

@keyframes ballBusRight {
  0%, 38% {
    left: 50%;
    top: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  41% {
    left: 50%;
    top: 10%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  46% {
    left: 50%;
    top: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  52% {
    left: var(--col-3-x);
    top: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  56% {
    left: var(--col-3-x);
    top: 96%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  59%, 100% {
    left: var(--col-3-x);
    top: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
}

/* Ball 3: PASS -> + PACE (71% to 84% of cycle) */
.ball-pass-to-pace {
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ballPassToPace var(--org-cycle) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ballPassToPace {
  0%, 70% {
    top: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  73% {
    top: 10%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  82% {
    top: 94%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  85%, 100% {
    top: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
}

/* --------------------------------------------------------------------------
   SYNCHRONIZED CARD ILLUMINATION AS THE LIGHT BALL PASSES EACH TIER
   -------------------------------------------------------------------------- */
.org-tier-core {
  animation: orgGlowCore var(--org-cycle) ease-in-out infinite;
}

@keyframes orgGlowCore {
  0%, 14% {
    border-color: #7dd3fc;
    box-shadow:
      0 0 0 4px rgba(56, 189, 248, 0.22),
      0 0 34px rgba(56, 189, 248, 0.65),
      0 12px 32px rgba(0, 0, 0, 0.55),
      inset 0 0 18px rgba(56, 189, 248, 0.24);
  }
  24%, 94% {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(56, 189, 248, 0.18);
  }
  100% {
    border-color: #7dd3fc;
    box-shadow:
      0 0 0 4px rgba(56, 189, 248, 0.22),
      0 0 34px rgba(56, 189, 248, 0.65),
      0 12px 32px rgba(0, 0, 0, 0.55),
      inset 0 0 18px rgba(56, 189, 248, 0.24);
  }
}

.org-tier-hub {
  animation: orgGlowHub var(--org-cycle) ease-in-out infinite;
}

@keyframes orgGlowHub {
  0%, 22%, 48%, 100% {
    border-color: rgba(167, 139, 250, 0.55);
    box-shadow:
      0 0 0 6px rgba(139, 92, 246, 0.08),
      0 16px 50px rgba(139, 92, 246, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  27%, 40% {
    border-color: #68e0b5;
    box-shadow:
      0 0 0 6px rgba(104, 224, 181, 0.24),
      0 0 46px rgba(56, 189, 248, 0.62),
      0 0 72px rgba(167, 139, 250, 0.55),
      inset 0 0 26px rgba(196, 181, 253, 0.28);
  }
}

.readyops-mini-node {
  animation: orgGlowReadyOps var(--org-cycle) ease-in-out infinite;
}

@keyframes orgGlowReadyOps {
  0%, 53%, 78%, 100% {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  }
  58%, 71% {
    border-color: #38bdf8;
    box-shadow:
      0 0 0 3px rgba(56, 189, 248, 0.26),
      0 0 34px rgba(56, 189, 248, 0.65),
      0 0 54px rgba(168, 85, 247, 0.38),
      inset 0 0 18px rgba(56, 189, 248, 0.22);
  }
}

.apex-mini-node {
  animation: orgGlowApex var(--org-cycle) ease-in-out infinite;
}

@keyframes orgGlowApex {
  0%, 53%, 78%, 100% {
    border-color: rgba(129, 140, 248, 0.42);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  }
  58%, 71% {
    border-color: #c4b5fd;
    box-shadow:
      0 0 0 3px rgba(167, 139, 250, 0.26),
      0 0 34px rgba(129, 140, 248, 0.68),
      0 0 54px rgba(56, 189, 248, 0.35),
      inset 0 0 18px rgba(167, 139, 250, 0.24);
  }
}

.pass-mini-node {
  border-color: rgba(251, 113, 133, 0.52);
  background: linear-gradient(160deg, rgba(29, 14, 48, 0.92) 0%, rgba(15, 11, 29, 0.96) 100%);
  animation: orgGlowPass var(--org-cycle) ease-in-out infinite;
}

@keyframes orgGlowPass {
  0%, 53%, 78%, 100% {
    border-color: rgba(251, 113, 133, 0.52);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.48), 0 0 20px rgba(251, 113, 133, 0.16);
  }
  58%, 71% {
    border-color: #fb7185;
    box-shadow:
      0 0 0 3px rgba(251, 113, 133, 0.28),
      0 0 36px rgba(251, 113, 133, 0.72),
      0 0 56px rgba(56, 189, 248, 0.40),
      inset 0 0 20px rgba(251, 113, 133, 0.25);
  }
}

.org-tier-pace {
  animation: orgGlowPace var(--org-cycle) ease-in-out infinite;
}

@keyframes orgGlowPace {
  0%, 80%, 100% {
    border-color: rgba(251, 113, 133, 0.58);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.52), 0 0 22px rgba(251, 113, 133, 0.18);
  }
  84%, 96% {
    border-color: #6ee7b7;
    box-shadow:
      0 0 0 3px rgba(52, 211, 153, 0.30),
      0 0 38px rgba(251, 113, 133, 0.75),
      0 0 58px rgba(52, 211, 153, 0.52),
      inset 0 0 22px rgba(251, 113, 133, 0.28);
  }
}

@keyframes orgPlusBadgeGlow {
  0%, 71%, 86%, 100% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(251, 113, 133, 0.55), 0 0 18px rgba(52, 211, 153, 0.35);
  }
  77% {
    transform: scale(1.22);
    border-color: #6ee7b7;
    box-shadow: 0 0 18px #ffffff, 0 0 28px #fb7185, 0 0 36px #34d399;
  }
}

@keyframes orgTrackPulse1 {
  0%, 9%, 28%, 100% { filter: brightness(1); }
  18% { filter: brightness(1.75) drop-shadow(0 0 8px #38bdf8); }
}

@keyframes orgTrackPulse2 {
  0%, 38%, 60%, 100% { filter: brightness(1); }
  49% { filter: brightness(1.75) drop-shadow(0 0 8px #38bdf8); }
}

@keyframes orgTrackPulse3 {
  0%, 70%, 86%, 100% { filter: brightness(1); }
  78% { filter: brightness(1.85) drop-shadow(0 0 10px #fb7185); }
}

.architecture-addon-link {
  padding-left: 10px;
  border-left: 1.5px solid rgba(251, 113, 133, 0.55);
  color: #fda4af;
  font-weight: 600;
}

.architecture-addon-link .arch-plus {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-radius: 50%;
  background: rgba(244, 63, 94, 0.22);
  border: 1px solid rgba(251, 113, 133, 0.6);
  color: #6ee7b7;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.pass-pace-addon-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(251, 113, 133, 0.42);
  background: linear-gradient(135deg, rgba(29, 14, 48, 0.78) 0%, rgba(14, 24, 44, 0.84) 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(244, 63, 94, 0.12);
  transition: all 0.24s ease;
}

.pass-pace-addon-card:hover {
  border-color: rgba(251, 113, 133, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45), 0 0 26px rgba(244, 63, 94, 0.24);
}

.pass-pace-plus {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(244, 63, 94, 0.2);
  border: 1.25px solid #fb7185;
  color: #6ee7b7;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 10px rgba(251, 113, 133, 0.45);
}

.pass-pace-addon-card img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.pass-pace-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.pass-pace-copy strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.2;
}

.pass-pace-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(244, 63, 94, 0.2);
  border: 1px solid rgba(251, 113, 133, 0.5);
  color: #fda4af;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pass-pace-copy small {
  color: #cbd5e1;
  font-size: 10.5px;
  line-height: 1.4;
}

.pass-pace-arrow {
  color: #fda4af;
  font-size: 13px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  :root {
    --org-col-gap: 8px;
  }
  .org-chart-flow .hub-node {
    width: min(82%, 320px);
  }
}

@media (max-width: 650px) {
  :root {
    --org-col-gap: 10px;
  }
  .system-visual.org-workflow-visual {
    padding: 16px 14px;
  }
  .org-chart-flow .hub-node {
    width: min(86%, 320px);
  }
  /* Phone top strip: keep the brand and the three ecosystem links inside the viewport. */
  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
  }
  .brand-link img {
    width: min(100%, 220px);
    height: auto;
  }
  .ecosystem-nav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }
  .ecosystem-nav a {
    flex: 1 1 auto;
    justify-content: center;
    padding: 7px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
}

.progress-label .status-word {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #fbbf24;
}

/* Keyboard accessibility: the roadmap tabpanel is focusable (tabindex="0") and
   needs the same visible focus ring as buttons and links; the architecture-strip
   links are stacked 11-16px rows, so give each a 24px minimum target (WCAG 2.5.8). */
.roadmap-detail:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 4px;
}

.architecture-destinations > a {
  min-height: 24px;
  align-items: center;
}