.network-composition { position:relative; min-height:min(43rem,calc(100vh - 5rem)); overflow:hidden; padding-block:clamp(2.5rem,5vw,4rem); background:radial-gradient(circle at 8% 48%,rgb(20 125 121 / 13%),transparent 30rem),radial-gradient(circle at 52% 25%,rgb(128 103 232 / 10%),transparent 28rem),radial-gradient(circle at 92% 62%,rgb(244 106 18 / 8%),transparent 27rem),linear-gradient(180deg,#101417,#0c1012 72%,#0a0d0f); }
.network-composition::after { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgb(255 255 255 / 1.5%) 1px,transparent 1px); background-size:5rem 100%; content:""; mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 75%,transparent); opacity:.28; }
.network-composition__inner { position:relative; z-index:1; }
.network-intro { max-width:52rem; margin-bottom:clamp(1.75rem,4vw,2.75rem); }
.network-kicker { margin:0 0 var(--space-3); color:var(--path-accent,var(--color-purple-400)); font-family:var(--font-utility); font-size:.67rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; }
.network-intro h1 { max-width:18ch; margin:0 0 var(--space-3); font-size:clamp(2.8rem,5vw,4rem); line-height:.97; }
.network-intro>p:last-child { max-width:39rem; margin:0; font-size:clamp(.95rem,1.5vw,1.1rem); }
.network-path-grid { display:grid; overflow:hidden; border:1px solid var(--color-border-soft); border-radius:var(--radius-lg); background:rgb(255 255 255 / 1.5%); box-shadow:var(--shadow-raised); }
.network-path { --path-accent:var(--color-purple-400); position:relative; display:flex; min-width:0; min-height:19rem; flex-direction:column; padding:clamp(1.75rem,4vw,3rem); background:radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--path-accent) 13%,transparent),transparent 18rem); transition:background-color 180ms ease; }
.network-path--partner { --path-accent:var(--color-teal-400); }
.network-path--join { --path-accent:var(--color-orange-400); }
.network-path+.network-path { border-top:1px solid var(--color-border-soft); }
.network-path::before { position:absolute; inset:0 auto auto 0; width:3.5rem; height:.125rem; background:var(--path-accent); content:""; opacity:.72; transition:width 180ms ease,opacity 180ms ease; }
.network-path h2 { margin:0 0 var(--space-3); font-size:clamp(1.8rem,3vw,2.4rem); transition:color 180ms ease,transform 180ms ease; }
.network-path>p:not(.network-kicker) { max-width:29rem; margin:0 0 var(--space-4); font-size:var(--font-size-sm); }
.network-path__link { display:inline-flex; width:fit-content; gap:var(--space-2); align-items:center; margin-top:auto; padding:.65rem .9rem; border:1px solid color-mix(in srgb,var(--path-accent) 45%,transparent); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--path-accent) 9%,transparent); color:var(--path-accent); font-family:var(--font-heading); font-size:1.05rem; font-weight:700; letter-spacing:.035em; text-decoration:none; text-transform:uppercase; transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease; }
.network-path__link span { transition:transform 180ms ease; }
.network-path:hover { background:color-mix(in srgb,var(--path-accent) 5%,transparent); }
.network-path:hover::before { width:5.5rem; opacity:1; }
.network-path:hover h2 { color:color-mix(in srgb,var(--path-accent) 70%,white); transform:translateY(-.1875rem); }
.network-path:hover .network-path__link span { transform:translateX(.25rem); }
.network-path:hover .network-path__link { border-color:color-mix(in srgb,var(--path-accent) 75%,transparent); background:color-mix(in srgb,var(--path-accent) 15%,transparent); color:var(--color-text); }
.network-path:focus-within { background:color-mix(in srgb,var(--path-accent) 6%,transparent); }
.network-path__link:focus-visible { outline:2px solid var(--path-accent); outline-offset:.4rem; }
.network-notice { display:flex; gap:var(--space-2); margin:0; padding-top:var(--space-4); color:var(--color-text-muted); font-size:.72rem; }
.network-notice span { display:inline-grid; width:1.05rem; height:1.05rem; flex:0 0 auto; place-items:center; border:1px solid currentColor; border-radius:50%; color:var(--color-teal-400); font-family:var(--font-utility); font-size:.58rem; font-style:normal; line-height:1; }
@media (min-width:48rem) { .network-path-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .network-path+.network-path { border-top:0; border-left:1px solid var(--color-border-soft); } }
@media (max-width:47.999rem) { .network-path { min-height:16rem; } }
@media (prefers-reduced-motion:reduce) { .network-path,.network-path::before,.network-path h2,.network-path__link span { transition:none; } }